以反应形式设置和更新表单数组的验证

Question

在 angular 4 中，我正在创建一个具有表单数组的表单

this.formBuilder.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
  required:false,
  selectType: ['', [Validators.required]],
  items: this.formBuilder.array([this.buildItems()])
})

...
buildItems() {
  return this.formBuilder.group({ 
     name: ['', [Validators.required]] 
});

这将构建表单，我可以从该表单和表单中的项目中添加删除等。我现在想要实现的是，当 selectType 等于 custom（在表单上设置为单选按钮值）时，我需要更改项目的验证 name 并清除其验证要求。

我已经完成了设置并更新了另一个表格，就像这样

  changeValidation() {
      if(condition){
          this.form.get('name').setValidators(Validators.required);
          this.form.get('name').updateValueAndValidity();
      }
  }

效果很好，但我不确定如何更新表单数组的验证。我试过了

this.items.clearValidators();
this.items.updateValueAndValidity();

我没有收到任何错误，但它也不起作用。哪一种有意义，因为我没有针对特定的 FormControl 但是当 FormControls 是数组时我如何指定特定的 FormControl？

Answer 1

how do i specify a specific FormControl when the FormControls are an array?

您必须使用 at 描述的方法 here 来获取单个控件：

this.items.at(0).clearValidators();

如果您想清除 name 控件的验证器，请这样做：

 this.items.at(0).controls.name.clearValidators();

如果你想删除每个控件的验证器，表单数组似乎没有提供这样的功能API。您必须遍历表单数组控件并删除每个控件的验证器：

this.items.controls.forEach(c => c.clearValidators());

Answer 2

您可以使用转换更新所有 FormArray 验证器：

$ (this.form.get('name') as FormArray).setValidators([Validators.required]);

$ (this.form.get('name') as FormArray).updateValueAndValidity();

同理，可以获取FormArray并清空值...

以反应形式设置和更新表单数组的验证

Set and update validation on form array in reactive forms

angular

angular-reactive-forms