Angular如何在创建控件后将Validator添加到FormControl？

Question

我们有一个具有动态构建形式的组件.使用验证器添加控件的代码可能如下所示

var c = new FormControl('', Validators.required);

但是,让我们说我想稍后添加第二个Validator .我们怎样才能做到这一点？我们无法在线找到任何相关文档.我确实发现虽然在表单控件中有setValidators

this.form.controls["firstName"].setValidators 

但目前尚不清楚如何添加新的或自定义验证器.

谢谢一堆.

Answer 1

您只需将FormControl传递给验证器数组.

这是一个示例,说明如何将验证器添加到现有FormControl:

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

请注意,这将重置您在创建FormControl时添加的任何现有验证程序.

Answer 2

添加@Delosdos发布的内容.

在以下位置为控件设置验证器FormGroup: this.myForm.controls['controlName'].setValidators([Validators.required])

从FormGroup中的控件中删除验证器: this.myForm.controls['controlName'].clearValidators()

运行上述任一行后,请更新 FormGroup. this.myForm.controls['controlName'].updateValueAndValidity()

这是以编程方式设置表单验证的一种惊人方式.

Answer 3

如果您正在使用reactiveFormModule并且formGroup定义如下:

public exampleForm = new FormGroup({
        name: new FormControl('Test name', [Validators.required, Validators.minLength(3)]),
        email: new FormControl('test@example.com', [Validators.required, Validators.maxLength(50)]),
        age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});

你可以使用这种方法向FormControl 添加一个新的验证器(并保留旧的验证器):

this.exampleForm.get('age').setValidators([
        Validators.pattern('^[0-9]*$'),
        this.exampleForm.get('age').validator
]);
this.exampleForm.get('email').setValidators([
        Validators.email,
        this.exampleForm.get('email').validator
]);

FormControl.validator返回包含所有先前定义的验证器的撰写验证器.

Answer 4

除了 Eduard Void 的答案之外，还有以下addValidators方法：

declare module '@angular/forms' {
  interface FormControl {
    addValidators(validators: ValidatorFn[]): void;
  }
}

FormControl.prototype.addValidators = function(this: FormControl, validators: ValidatorFn[]) {
  if (!validators || !validators.length) {
    return;
  }

  const old_validator = this.validator;

  this.clearValidators();
  this.setValidators( old_validator ? [ old_validator , ...validators ] : validators );
};

使用它你可以动态设置验证器：

some_form_control.addValidators([ first_validator, second_validator ]);
some_form_control.addValidators([ third_validator ]);

Answer 5

如果您需要删除添加的表单控件上的某些现有验证，请在控件上调用以下函数

this.form.controls["name"].clearValidators();

之后，您需要调用以下函数来更新表单控件，它将立即在表单控件上生效。

this.form.controls['name'].updateValueAndValidity();

如果您需要在已添加的表单控件上添加一些验证，请在控件上调用以下函数

this.signupForm.controls['name'].setValidators([Validators.required]);

之后updateValueAndValidity()立即调用函数，这样就可以立即反映出来。

Answer 6

我认为所选答案不正确，因为最初的问题是“如何在创建 formControl 后添加新的验证器”。

据我所知，这是不可能的。您唯一能做的就是动态创建验证器数组。

但我们缺少的是有一个函数 addValidator() 来不覆盖已经添加到 formControl 的验证器。如果有人对此要求有答案，很高兴在此发布。