使用 FormArray 重置表单时删除字段错误答案

【问题标题】：Remove field errors when resetting a form with a FormArray使用 FormArray 重置表单时删除字段错误
【发布时间】：2020-05-09 16:43:59
【问题描述】：

在我的 Angular 应用程序中，我有一个包含多个文本字段的表单，例如订单 ID 和订单日期。我的表单还有一个 FormArray，其中每个元素都是代表一行字段的 FormGroup。此表单数组在启动时有 1 个 FormGroup，可以通过单击按钮添加更多。提交表单后，我想在获得将数据发布到 REST 服务的成功响应后重置表单。我的重置代码形式如下：

resetItems(): void {
  this.orderForm.reset();
  this.clearErrorsFromFormGroup(this.orderForm);
  let items = this.orderForm.get('items') as FormArray;
  items.controls = [];
  this.addItem();
  this.clearErrorsFromFormGroup(items.at(0) as FormGroup);


}

  private clearErrorsFromFormGroup(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach(key => {
      formGroup.controls[key].setErrors(null);
    });
  }

执行上述操作时，订单 ID 和订单日期等顶级字段会被重置，并且不会以红色突出显示，因为我已删除错误。我想将我的表单数组设置为与启动 1 个元素时相同的方式。我的代码清除了表单数组并添加了一个 rowData 元素。然后我清除 rowData FormGroup 的错误。在 UI 上，此 rowData 的字段都已清除，但即使我已清除错误，它们仍以红色突出显示。有人可以帮忙吗？

我在 https://stackblitz.com/edit/angular-8qjphu 上添加了一个 StackBlitz 链接来演示这一点

【问题讨论】：

你的 stackblitz 演示没有你上面的代码
对@brijmcq 感到抱歉。我现在有了。用正确的链接更新了链接。

标签： angular angular-material angular8

【解决方案1】：

items 是 FormArray，清除控件的方式不起作用。

检查此代码

 Object.keys(formGroup.controls).forEach(key => {
      formGroup.controls[key].setErrors(null);
    });

想象一下，您在这里按下了items 键

formGroup.controls['item'] // this is a FormArray and 
// not FormControl so setErrors(null) won't work here

解决此问题的一种方法是检查 FormArray 的实例，然后在控件字段上进行迭代，您可以使用 clearValidators 和 updateValueAndValidty 函数。

   if (formGroup.controls[key] instanceof FormArray) {
         const control = formGroup.get(key) as FormArray;
        for (let i = 0; i < control.controls.length; i++) {
          const formGroup = control.controls[i] as FormGroup;
          Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            control.clearValidators();
            control.updateValueAndValidity();
          });
        }
      }

这是一个 stackblitz 演示： https://stackblitz.com/edit/angular-f7pflm?file=src%2Fapp%2Fapp.component.ts

这是您的clearErrorsFromFormGroup 现在的样子

private clearErrorsFromFormGroup(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach(key => {
      formGroup.controls[key].setErrors(null);
       if (formGroup.controls[key] instanceof FormArray) {
         const control = formGroup.get(key) as FormArray;
        for (let i = 0; i < control.controls.length; i++) {
          const formGroup = control.controls[i] as FormGroup;
          console.log('control', control);
          Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            control.clearValidators();
            control.updateValueAndValidity();
          });
        }
      }

    });
  }

【讨论】：

【解决方案2】：

重置后尝试使用formGroup.updateValueAndValidity()方法

【讨论】：