Angular: setErrors funktioniert nicht innerhalb der Schleife

Question

Ich habe eine FormArray, deren Felder ich sofort validieren möchte. Ich bin über die FormArray iterieren und für jedes Element (FormGroup), ich überprüfe eine Bedingung, Deaktivieren der gültigen FormGroup s zu vermeiden, den Benutzer zu ändern und setzen Fehler auf eine bestimmte FormControl innerhalb der FormGroup.

Unten ist mein Code. rows ist die 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 
      }); 
}); 

Der Fehler wurde nicht wie beabsichtigt festgelegt. Diese Kontrolle wird als VALID angezeigt, wenn ich console.log es.

Update: Wickelte es von einem setTimeout und es funktionierte.

Answer 1

Es passiert, weil Sie Validatoren innerhalb OnInit Haken setzen. Wenn Angular die Steuerelemente in die Ansicht platziert, werden die Validierer erneut ausgeführt und die von Ihnen festgelegten Fehler werden entfernt.

Hier ist a demo, die dieses Verhalten umgehen, indem Sie AfterViewInit Hook verwenden. Der Code wird auch in einen setTimeout-Aufruf verpackt, um ExpressionChangedAfterChecked Fehler zu vermeiden.

Ich persönlich widerspreche diesem Verhalten und es gibt eine open issue dafür, so dass Sie das verfolgen.