1

我正在使用 Angular 反应式表单构建一个通用表单。我有以下用于输入元素的通用 Html

<div class="form-input form-group" [formGroup]="group">
    <div class="row">
        <div class="col-2 font-label">
            <label>{{ config.label }}</label>
        </div>
        <div class="col-10">
            <input type="text" [attr.placeholder]="config.placeholder" disabled="disabled" class="form-control"
                [formControlName]="config.name">
            <div [hidden]="!(group.controls[config.name].invalid && group.controls[config.name].touched)">
                <small class="form-text text-danger" [hidden]="!group.controls[config.name]?.errors?.required"></small>
                <small class="form-text text-danger" [hidden]="!group.controls[config.name]?.errors?.minlength"></small>
                <small class="form-text text-danger" [hidden]="!group.controls[config.name]?.errors?.maxlength"></small>
            </div>
        </div>
    </div>
</div>

但对于以下!group.controls[config.name]?.errors?.required它告诉我Identifier 'required' is not defined。minlength和相同maxlength。从哪里我可以得到minlength和maxlengthrequired errors?

4

2 回答 2

1

试试这个

<small class="form-text text-danger" [hidden]="!group.controls[config.name].hasError('required')"></small>
<small class="form-text text-danger" [hidden]="!group.controls[config.name].hasError('minlength')"></small>
<small class="form-text text-danger" [hidden]="!group.controls[config.name].hasError('maxlength')"></small>
于 2017-06-23T09:59:40.100 回答
0

AbstractControl#hasError您可以像这样利用方法的第二个参数：

<small class="form-text text-danger" 
       [hidden]="!group.hasError('required', config.name)">
</small>

另外，我建议您使用*ngIf而不是hidden.

您可以阅读此文章以获得深入的解释。

于 2017-06-23T12:51:10.487 回答