角度4コントロールグループの妥当性確認エラー

Question

角度のある反応性フォームを使用して一般的なフォームを作成しています。私は、入力要素

<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私に告げるために、次の一般的なHTML形式を持っています。 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方法の2番目のパラメータを利用することができます試してみてください。また

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

---

hiddenの代わりに*ngIfを使用することをおすすめします。

You can read this for a deep explanation。