如何在自定义控件中添加所需的星号?

时间:2018-07-01 10:15:00

标签: angular angular-material2

我正在使用angular 6创建一个包含自定义窗体控件的自定义组件。到目前为止,我已经在组件中实现了ControlValueAccessor

我的自定义控件是来自Angular Material的简单MatSelect组件。我想在需要该控件时显示星号(*)。

到目前为止,我已经可以使用自定义控件了,但是将required属性添加到组件不会将星号添加到我的控件中!

<app-provinces formControlName="projectProvince" required></app-provinces>

我应该为它定义一个@Input变量并手动处理它,还是应该自动完成?

1 个答案:

答案 0 :(得分:1)

是的,您应该在组件中添加cargo test --all required

类似这样的东西:

@Input()

组件:

<div class="form-group m-form__group row" [ngClass]="{
                    'has-danger': formGroup.controls[formControlName].invalid && formGroup.controls[formControlName].touched,
                    'has-success': formGroup.controls[formControlName].valid && formGroup.controls[formControlName].touched,
                    'has-no-action': formGroup.controls[formControlName].untouched
                                }">
        <label class="col-form-label col-lg-3 col-sm-12" [for]="formControlId">
            {{formControlLabel}}
            <span *ngIf="isRequired" class="required" aria-required="true"> * </span>
        </label>
        <div class="col-lg-4 col-md-9 col-sm-12">
            <select placeholder="place_holder_text" [disabled]="disabled" [class]="formControlName" [id]="formControlId" [data]="formControlItems"  (click)="setAsTouched()" (valueChanged)="store($event)"></select>
            <div class="form-control-feedback">{{formControlErrorText || 'Required Field May Not Be Empty'}}</div>
            <span class="m-form__help">{{formControlHelpText}}</span>
        </div>
    </div>

用法示例:

@Input('required') isRequired: boolean;