代码之家  ›  专栏  ›  技术社区  ›  Mohammad Dayyan

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

  •  0
  • Mohammad Dayyan  · 技术社区  · 7 年前

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

    我的自定义控件是一个简单的 MatSelect 来自角材料的组件。我想显示星号( * )当需要控制的时候。

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

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

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

    1 回复  |  直到 7 年前
        1
  •  1
  •   Edric Prince Bansal    7 年前

    是的,你应该加一个 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;
    

    示例用法:

    <select-form-control
        [required]="true"
        [group]="myFormGroup"
        label="Name"
        name="name"
        controlId="name"
        [inputItems]="array"
        helpText="Enter..."
        [value]="name"
        (valueChange)="someMethod($event)">
    </select-form-control>