角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。