Angular Reactive Forms의 FormGroup 인스턴스에서 설정 오류가 예상대로 작동하지 않습니다.

Question

각도 4.4.3 반응 형을 사용하여 양식의 컨트롤 그룹에 대한 사용자 지정 유효성 검사를 구현합니다. docs 업데이트 방법에 따라 AbstractControl.setErrors은 AbstractControl의 errors 속성을 업데이트하며, 호출 된 해당 부모의 상태를 업데이트하지만 부모 errors 속성은 업데이트하지 않습니다. FormGroup 인스턴스에서 errors 속성을 설정하려고 했으므로 FormGroup에서 상속 한 setErrors를 사용합니다. 그러나 예상대로 오류를 업데이트하지 않습니다. 가 FormControl 인스턴스에서 그것을 시도 (아니지만 부모의 오류!) 자신의 오류뿐만 아니라 부모의 유효 상태를 업데이트 않습니다 :

let myFormGroup 
    = this._formBuilder 
      .group({ 
        ctrl1: [null], 
        ctrl2: [null] 
       }, 
       { 
        validator: (fg: FormGroup) => { 
            let ctrl1 = fg.get('ctrl1'), 
             ctrl2 = fg.get('ctrl2'), 
             ctrl1Empty = !ctrl1.value, 
             ctrl2Empty = !ctrl2.value; 

             //Successfully sets ctrl1.errors and fg.status, but not fg.errors 
             if (ctrl1empty) 
             ctrl1.setErrors({ctrl1required: true}); 
             //Successfully sets ctrl2.errors and fg.status, but not fg.errors 
             if (ctrl2Empty) 
             ctrl2.setErrors({ctrl2required: true}); 
             //Doesn't work, doesn't update fg.errors 
             if (ctrl1Empty && ctrl2Empty) 
             fg.setErrors({required: true}); 
           } 
       }) 

어떤 생각이 왜 내 샘플 코드는

다음은?

Answer 1

@ 시크릿의 확인 덕택에 추가 검사를 통해 문제가 어디에 있는지 파악했습니다.

setErrors는 폼 그룹 인스턴스의 errors 속성을 설정합니다. 그러나 내 질문에 표시된 사용자 지정 유효성 검사기 값을 명시 적으로 반환하지 않습니다 (즉, 정의되지 않은 false 값). 반응 형 모듈의 코드를 보았을 때 this line에있는 다양한 유효성 검사기에서 발생한 오류를 병합하는 this method이 발견되어이 메서드는 오류 (내 코드 단편에서 정의되지 않음)가 null이 아닌지 여부를 확인합니다. 이 조건 (es5 버전에서 검사 됨)은 false로 평가되어 결과가 null이되므로 코드에 설정된 errors 속성의 내용을 무시합니다. 필자가 배운 교훈은 더 중첩 된 FormGroup 인스턴스에 오류를 설정하기위한 자체 사용자 지정 논리가있는 경우에도 항상 사용자 지정 유효성 검사기에서 값을 반환한다는 것입니다.