각도 : 루프 내에서 setErrors가 작동하지 않습니다.

Question

FormArray 필드의 유효성을 한 번에 확인하고 싶습니다. FormArray을 반복하고 각 요소 (FormGroup)에 대해 유효한 FormGroup을 사용 중지하고 사용자가 해당 요소를 변경하지 못하도록하고 오류를 (FormGroup)으로 설정하지 않도록 조건을 검사하고 있습니다.

아래 코드는 제 코드입니다. 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가 뷰 내부에 컨트롤을 배치하면 유효성 검사기를 다시 실행하여 설정 한 오류를 제거합니다.

다음은 AfterViewInit 후크를 사용하여이 문제를 해결하는 a demo입니다. 또한 코드는 setTimeout 호출로 포장되어 ExpressionChangedAfterChecked 오류를 피합니다.

저는 개인적으로이 동작에 동의하지 않으며 그에 대한 open issue이 있으므로 고양이가이를 추적합니다.