向动态创建的输入添加/删除响应式表单验证器答案

【问题标题】：Add/remove reactive form validators to dynamically created inputs向动态创建的输入添加/删除响应式表单验证器
【发布时间】：2018-02-15 04:06:13
【问题描述】：

我在 Angular 4 中创建了一个表单，它允许用户单击表单中的添加或删除按钮来向表单添加/删除字段。我使用 ngFor 从数组中创建屏幕上的 html 输入（由 add 函数放大，或由 remove 函数缩小）。

在 html 模板中，我可以在 formControlName="control{{index}}" 表单中添加 formControlName，以确保每个新输入都有一个 formcontrol。

但是如何为这些输入动态添加和删除验证器？

【问题讨论】：

可能与此类似？ ►stackoverflow.com/questions/41175411/…

标签： angular angular2-forms

【解决方案1】：

你能看看这个文件https://angular.io/api/forms/AbstractControl#updateValueAndValidity，

对于添加/删除控件，您可以使用这些方法

添加控制/删除控制

对于值和验证器，您可以像这样使用

 this.form.controls['test_control'].setValidators([Validators.required])
 this.form.controls['test_control'].updateValueAndValidity()

【讨论】：

我没有在您引用的文档中看到这些功能（尽管它们看起来令人鼓舞）。

【解决方案2】：

来源Link

对于 Angular 11，使用 setValidators() 和 updateValueAndValidity() 方法

  setRequired() {
    this.profileForm.controls.firstName.setValidators([Validators.required]);
    this.profileForm.controls.firstName.updateValueAndValidity();
  }

  unsetRequired() {
    this.profileForm.controls.firstName.setValidators(null);
    this.profileForm.controls.firstName.updateValueAndValidity();
  }

【讨论】：

【解决方案3】：

Angular 13。它对我有用...

OnInit 函数：

ngOnInit() {
    this.form.get('type')?.valueChanges.subscribe((val) => {
      if (val) {
        switch (val) {
          case 1:
            this.removeValidators(['comment', 'id']);
            this.addValidators(['desc', 'options']);
            break;
          case 2:
            this.removeValidators(['desc', 'options', 'comment']);
            this.addValidators(['id']);
            break;
        }
      }
    });
}

Func（添加/删除验证器）：

addValidators(controls : string[]){
    controls.forEach(c => {
        if(['desc','comment'].includes(c)){
            this.form.get(c)?.setValidators([Validators.required,Validators.maxLength(250)]);
        } else {
            this.form.get(c)?.setValidators(Validators.required);
        }
        this.form.get(c)?.updateValueAndValidity();
    });
}

removeValidators(controls : string[]){
    controls.forEach(c => {
        this.form.get(c)?.clearValidators();
        this.form.get(c)?.updateValueAndValidity();
    });
}

【讨论】：