각도 반응 양식과 사용자 정의 유효성 검사기 오류

Question

는,이처럼 보이는 custom form validator 있습니다

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; 

export function myCustomValidator(myCustomArg: string): ValidatorFn { 
    return (control: AbstractControl): ValidationErrors | null => { 

    if (control.value) { 
     // do some checks with control.value and myCustomArg 
     // return error if needed 
    } 

    // return null otherwise 
    control.setErrors(null); 
    return null; 
    }; 
} 

를하지만 중 하나를 사용하려고하면 내 reactive forms :

ngOnInit() { 
    this.form = new FormGroup({ 
     'myControl': new FormControl(null, [ myCustomValidator(...) ]), 
     // ... 
    }); 
    } 

내가 할 몇 가지 오류 :

ERROR TypeError: Cannot read property 'emit' of undefined at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl._updateControlsErrors (forms.es5.js:2836) at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl.setErrors (forms.es5.js:2772) at file-extension.validator.ts:17 at forms.es5.js:506 at Array.map() at _executeValidators (forms.es5.js:506) at FormControl.validator (forms.es5.js:462) at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl._runValidator (forms.es5.js:2720) at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.AbstractControl.updateValueAndValidity (forms.es5.js:2688) at new FormControl (forms.es5.js:3011)

---

ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}

---

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

그러나 불행하게도 그들은 매우 도움이되지 않습니다.

Answer 1

이 문제는 유효성 검사기가 필드에 지정되는 방식과 관련이 있습니다.

사실, 유효성 검사기는 컨트롤의 값인 에 액세스하려고합니다. 발리 공장 함수가 호출 될 때

하지만, 컨트롤이 아직 존재하지 않습니다

이

this.form = new FormGroup({ 
    'myControl': new FormControl(null, [ myCustomValidator(...) ]), 
    // ... 
}); 

그래서이 문제를 해결하기 위해, 단지 양식을 작성 먼저 다음 유효성 검사기를 할당 :

ngOnInit() { 
    // first create the form with its controls 
    this.form = new FormGroup({ 
    'myControl': new FormControl(null), 
    // ... 
    }); 

    // then assign the custom validator 
    this.form.get('myControl').setValidators([ 
    myCustomValidator(...), 
    ]); 
}