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

Posted 2023-02-18

【中文标题】如何在自定义控件中添加所需的星号？

【英文标题】：How to add required asterisk in a custom control?

【发布时间】：2018-12-09 20:48:51

【问题描述】：

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

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

到目前为止，我已经让自定义控件工作了，但是将required 属性添加到组件并不会将星号添加到我的控件中！

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

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

【问题讨论】：

我很困惑。如果您没有在组件中添加任何代码来执行此操作，为什么星号会神奇地出现在您希望它出现的位置？

好吧，我认为它是另一个表单控件！

【参考方案1】：

是的，您应该将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>