角度反応性のフォームとカスタム検証エラー

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

この問題は、バリデータがフィールドに割り当てられる方法に関連しています。

実際、バリデータはコントロールの値control.valueにアクセスしようとしています。

しかし、バリのファクトリ関数が呼び出されたときに、コントロールがまだ存在しません：

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(...), 
    ]); 
}