首页 文章

角度反应形式和自定义验证器错误

提问于
浏览 次
1

在我的Angular 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;
  };
}

但当我尝试在我的一个_1278969中使用它时：

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

我收到几个错误：

ERROR TypeError：无法在FormControl.webpackJsonp中读取未定义的属性'emit'... / .. / .. / 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：在FormControl.Weridators（forms.es5.js：506）的Array.map（）处于FormControl.webpackJsonp的FormControl.validator（forms.es5.js：462）中的506 ... / .. / .. / forms / FormControl.webpackJsonp上的@ angular / forms.es5.js.AbstractControl._runValidator（forms.es5.js：2720）... / .. / .. / forms/@angular/forms.es5.js.AbstractControl.updateValueAndValidity（ forms.es5.js：2688）在新FormControl（forms.es5.js：3011）

ERROR CONTEXT DebugContext_ {view：，nodeIndex：0，nodeDef：，elDef：，elView：}

错误错误：formGroup需要一个FormGroup实例 . 请通过一个 .

但遗憾的是他们并没有太大的帮助 .

angular typescript angular-reactive-forms angular-forms angular-validation

1 回答

  • 1

    该问题与验证器分配给该字段的方式有关 .

    实际上，验证器正在尝试访问控件的值 control.value .

    但是，当调用验证器工厂函数时，控件尚不存在：

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

    所以为了解决这个问题，只需 create the form first 和 then 分配验证器：

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

相关问题