Angular2 양식 모델을 사용하여 조건부 유효성 검사기를 사용하려고합니다. myForm.setValidators()를 사용하려고 시도했지만 작동하지 않는 것 같습니다

Question

저는 이오닉/각도 2에서 모델 양식을 사용하려고했습니다. 조건부 유효성 검사를 수행 할 양식이 있습니다. 사용자는 필요한 6 개의 필드로 시작한 다음 '수동'및 '자동'처리 중에서 선택할 수 있습니다. '자동'을 선택하면 3 개의 입력/선택 항목이 렌더링됩니다. 이 3 개의 입력란은 필수 입력 사항이 아니어야합니다.

여기에 모델이 시작이다 :

this.myForm = this.formBuilder.group({ 
    name: ['', Validators.compose([Validators.required, Validators.maxLength(45), Validators.minLength(2)])], 
    img: [''], 
    longDescription: ['', Validators.compose([Validators.required, Validators.maxLength(200)])], 
    shortDescription: ['', Validators.compose([Validators.required, Validators.maxLength(45)])], 
    processingType: [this.PROCESSING_TYPE.MANUAL], 
    discountType: ['' ], 
    discountRule: ['' ], 
    discountAmount: ['' ], // money, isNumbersOnly handled by custom validator 
    product: [''], 
    dateRuleDays: ['' ], 
    dateRuleTimeStart: ['' ], 
    dateRuleTimeEnd: ['' ], 

    startDate: ['', Validators.required], 
    expiryDate: ['', Validators.required ] 
}); 

discountType, discountRule, discountAmount 내가 요구되기 전환하고자하는 3 개 필드는 다음과 같습니다. 여기

내가 무엇을 시도했다입니다 : setProcessingType의 FN가 호출되는

마크 업 사용자가 '매뉴얼'을 사이 클릭하면

<!-- automatic or manual --> 
<h4 margin-top text-center>Processing Type</h4> 
<ion-row text-center> 
    <ion-col width-50> 
     <button class="width-80" color="primary" (click)="setProcessingType(PROCESSING_TYPE.MANUAL)" ion-button margin-top>{{ PROCESSING_TYPE.MANUAL }}</button> 
    </ion-col> 
    <ion-col width-50> 
     <button class="width-80" color="primary" (click)="setProcessingType(PROCESSING_TYPE.AUTOMATIC)" ion-button margin-top>{{ PROCESSING_TYPE.AUTOMATIC }}</button> 
    </ion-col> 
</ion-row> 

setProcessingType가 호출됩니다 (필요한 경우 i는 전체 페이지를 제공 할 수 있습니다) '자동'버튼. type : string은 processingType으로 설정할 새 값입니다.

setProcessingType(type: string): void { 

this.myForm.patchValue({ // i welcome comments to correct this to 'setValue()' if needed 
    processingType: type 
}); 

let formCtrls = ['discountType', 'discountRule', 'discountAmount', 'dateRuleDays', 'dateRuleTimeStart', 'dateRuleTimeEnd']; 
let add = [Validators.required]; 
let empty = []; 

formCtrls.forEach((key, index) => { 
    if (this.myForm.controls && this.myForm.controls[key]) { 
    if (type === this.PROCESSING_TYPE.AUTOMATIC) { 
     this.myForm.controls[key].setValidators([Validators.required]); 
    } else { 
     console.log('resetting validators...'); 
     this.myForm.controls[key].setValidators([]); 
     console.log('errors on : ', key, this.myForm.controls[key].errors); 
    // this.myForm.controls[key].markAsUntouched();  // attempt 3928 
    // this.myForm.controls[key].markAsPristine()  // attempt 3929 
     //this.myForm.controls.updateValueAndValidty(); // this throws an error 
    } 
    } 
}) 

    console.log('new form controls: ', this.myForm.controls); 

}

내가 여기

this.myForm.get('processingType').valueChanges.subscribe(data => this.onProcessingTypeChanged(data)); 

위의 함수와 동일한 로직을 실행했던 나는 또한 'processingType'valueChanges에 가입 한은 값 내 로그에서 스크린 샷입니다 유효성 검사기를 추가하려고합니다.

시작 (수행 방법) ...

'자동'을 클릭 한 후 왜 여전히 null입니까?

'수동'을 클릭 한 후에는 필수 항목입니까? 상기 의심 기준

난

this.myForm.controls.updateValueAndValidty(); 

또는 this.myForm.controls하는 열쇠 .updateValueAndValidity() 의심;

이 문제이지만 코드 내에서 주석을 달았으므로 두 함수 모두 '함수가 아닙니다'오류가 발생했습니다.

거의 모든 조건부 유효성 검사, 각도 2 양식 모델, 동적으로 유효성 검사기를 추가하는 등의 검색 기능을 제공합니다. 여기 나열된 링크가 너무 많습니다. 하하.

누군가가 문제를 진단하는 데 도움이되기를 바랍니다.

미리 감사드립니다.

는

Answer 1

UPDATE :이 post에 댓글을 2017년 4월 3일

감사합니다, 여기에 정답은 명시 적으로 다시 null로 제어에 오류를 설정하는 것입니다.

예 :

formCtrls.forEach((key, index) => { 
    if (this.myForm.controls && this.myForm.controls[key]) { 
    if (data === this.PROCESSING_TYPE.AUTOMATIC) 
     this.myForm.controls[key].setValidators([Validators.required]); 
    else { 
     this.myForm.controls[key].validator = []; 
     this.myForm.controls[key].setErrors(null); // CORRECT WAY- NOW VALIDATORS ARE GONE AND ERRORS ARE NULL 
    } 
    } 
}) 

OLD 대답은

내가이 문제를 해결하지만 편안하지 않다 것으로 보인다. 느낌은 다음과 같습니다 :

1) 1.이 작업을 수행하는 확실한 방법이 없습니다.

2.) 이것은 거대한 해킹입니다.

3.) 이것은 버그입니다. (저는이 문제에 대해 의심합니다. 저는 보통 이런 경우에 잘못 생각합니다.)

컨트롤을 반복하고 setValidators()를 사용하여 루핑을하면 실제로 작동합니다. 위의 @ Sampath의 대답 (setValidators()와 같은 방식으로 작동하지만 문제를 해결하지 않음)을 시도하기 전까지는 깨닫지 못했습니다. .

valueChanges 옵저버의 콜백이 실행될 때마다이를 수정하기 위해 각 입력 값을 명시 적으로 빈 문자열로 설정합니다.

코드 :

onProcessingTypeChanged(data) { 

let formCtrls = ['discountType', 'discountRule', 'discountAmount', 'dateRuleDays', 'dateRuleTimeStart', 'dateRuleTimeEnd']; 
let add = [Validators.required]; 
let empty = []; 
let newValue; 

if (data === this.PROCESSING_TYPE.AUTOMATIC) newValue = ""; 
else newValue = " "; // SET TO AN EMPTY STRING 

this.myForm.patchValue({ 
    discountType: newValue, 
    discountRule: newValue, 
    discountAmount: newValue, 
    product: newValue, 
    dateRuleDays: newValue, 
    dateRuleTimeStart: newValue, 
    dateRuleTimeEnd: newValue, 
}); 


formCtrls.forEach((key, index) => { 
    if (this.myForm.controls && this.myForm.controls[key]) { 
    if (data === this.PROCESSING_TYPE.AUTOMATIC) 
     this.myForm.controls[key].setValidators([Validators.required]); 
    else 
     this.myForm.controls[key].setValidators([]); 
    } 
}) 

} 탐구 좋은 비트 다음

는 이것이 폐쇄 리턴 대해 (myForm.controls하는 열쇠 .errors)이 내부적으로 처리되지 않은 오류를 보인다

따라서 각 값을 빈 문자열로 재설정하지 않으면 (빈 문자열은 허위이지만 빈 문자열은 위조 된 것이지만 닫음에서는없는 것으로 전달됩니다. 빈 입력), 각 입력을 비어있는 각도로 등록하고 오류 개체를 {required : true}로 설정하여 각 입력에 필요한 유효성 검사기가 없더라도 양식을 여전히 유효하지 않은 것으로 등록합니다.

올바른 것으로 표시하지 않으려면이 논리를 수정하거나 비슷한 문제가있는 사람에게 의견을 보내주세요.