角度：ループ内でsetErrorsが機能しない

Question

私はFormArrayのフィールドを一度に検証したいと思います。 FormArrayを繰り返し、各要素（FormGroup）に対して、有効なFormGroupを無効にして、ユーザーがそれを変更しないようにして、エラーをFormGroup内の特定のFormControlに設定しています。

以下は私のコードです。 rowsはFormArrayです。

response.forEach((item, index) => { 
    if (item.detailName.valid && item.detailNo.valid) 
     (<FormArray>this.detailForm.get('rows')).at(index).disable({ 
      onlySelf: true 
     }); 
    else if (!(item.detailName.valid && item.detailNo.valid)) 
     if (!!item.detailName.value && !item.detailNo.value) 
      this.detailForm.get(['rows', index, 'detailName']).setErrors({ 
       'invalidValue': true 
      }); 
     else 
      this.detailForm.get(['rows', index, 'detailNo']).setErrors({ 
       'invalidValue': true 
      }); 
}); 

エラーは意図したとおりに設定されていません。そのコントロールは、console.logならばVALIDと表示されます。

更新：setTimeoutでラップして動作させました。

Answer 1

OnInitフック内にバリデーターを設定しているので、この問題が発生しています。 Angularがコントロールをビューの内側に置くと、バリデータが再実行され、設定したエラーが取り除かれます。

a demoは、AfterViewInitフックを使用してこの現象を回避します。コードはまたsetTimeoutコールでラップされ、ExpressionChangedAfterCheckedのエラーを回避します。

私は個人的にこの動作に同意せず、それにはopen issueがあるので、それを追跡します。