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

我们有一个具有动态构建表单的组件。用验证器添加控件的代码可能如下所示：

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

但是，假设我要稍后添加2nd Validator 。我们怎样才能做到这一点？我们在线上找不到任何文档。我确实发现，尽管在表单控件中有setValidators

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

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

您只需向FormControl传递一个验证器数组。

这是一个示例，显示如何将验证器添加到现有FormControl中：

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

请注意，这将重置在创建FormControl时添加的所有现有验证器。

添加到@Delosdos发布的内容上。

在中为控件设置验证器FormGroup： this.myForm.controls['controlName'].setValidators([Validators.required])

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

运行以上任一行后，更新FormGroup。 this.myForm.controls['controlName'].updateValueAndValidity()

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

如果您正在使用reactFormFormModule并具有如下定义的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返回一个包含所有先前定义的验证器的撰写验证器。

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

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

但是我们错过的是拥有一个函数addValidator（）来不覆盖已经添加到formControl的验证器。如果有人对此要求有答案，可以在这里发布。

除了爱德华·沃德（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;
  }

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

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

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