角活性形式和自定义验证错误

Question

在我的角4的应用程序，我有一个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(...), 
    ]); 
}