添加/删除反应式表单验证器以动态创建输入

Question

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

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

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

Answer 1

您可以查看此文档https://angular.io/guide/dynamic-form，

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

  

的AddControl / removeControl

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

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

Answer 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();
  }