角4控制组验证错误

Question

我正在建立一个使用角反应形式的通用形式。我有以下的普通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和maxlength和required errors?

Answer 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> 

Answer 2

您可以使用它像这样采取AbstractControl#hasError方法的第二个参数的优势：

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

---

而且，我建议你使用*ngIf而不是hidden。

You can read this for a deep explanation。