FormArray 长度不会被 form.reset() 重置答案

【问题标题】：FormArray length does not reset by form.reset()FormArray 长度不会被 form.reset() 重置
【发布时间】：2018-05-04 15:39:45
【问题描述】：

我正在研究 Angular 表单数据驱动方法，我将表单控件动态添加到 FormArray，我使用 form.reset() 重置添加的控件，但 form.reset() 不会重置 FormArray 长度，我发现这是一个已知问题，可以使用这种方法解决，https://github.com/angular/angular/pull/11051，但我仍然不清楚这一点。请帮忙，谢谢

reviewForm: FormGroup;
  ngOnInit(){
    this.reviewForm = new FormGroup({            
      'controlArray': new FormArray([        
    ])
    });
  }

onSubmit(){     
    this.formData = new FormData(this.formService.formName, this.reviewForm.value.controlArray);    
    let formControls = JSON.stringify(this.formData); 
    // console.log(formControls);
    this.formService.createForm(formControls)
      .subscribe(
        data => console.log(data),
        error => console.error(error)
    );
    this.reviewForm.reset();    
  }

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

在FormControl、FormGroup 或FormArray 上调用 reset 只会重置它们所附加到的原生 html 控件的值。它不会从DOM 中删除控件。

向FormArray 添加控件的唯一方法是动态地通过组件代码文件（打字稿）。这意味着您将动态更新DOM。因此，在FormArray 上调用reset 只会清除动态添加的控件的值（将控件设置为其初始状态。例如输入框的空字符串）。另一方面，重置FromArray 的长度需要删除FormArray 中的所有控件。

因此在这种情况下，您必须将FormArray 控件本身设置为空FormArray。考虑以下示例，该示例通过将 FormArray 的所有控件替换为空的 FormArray 实例来删除它，

this.reviewForm.setControl('controlArray', new FormArray([]));

当与 FormBuilder 实例一起使用时，您可以按以下方式进行操作，

this.reviewForm.setControl('controlArray', this.fb.array([])); // here, `fb` is a form builder instance

【讨论】：

fb 只是FormBuilder 的一个实例。您可以重写代码，例如this.reviewForm.setControl('controlArray', new FormArray([]));。答案已更新
这会破坏该控件上的订阅。
那我们怎样才能完全重置FormArray呢？ @Twois
@sainu 当我们创建一个新的 FormGroup 时，我们设置了默认值，我认为重置功能应该使用它们而不是清除所有内容并将所有内容设置为 null。
从 Angular 8+ 开始，从 FormArray 中删除所有组件的推荐方法是 formArray.clear();

【解决方案2】：

另一种方法是clear 数组并在必要时添加添加默认数组元素，例如：

// All array elements are removed
(this.reviewForm.get('controlArray') as FormArray).clear();
// Other values are removed
this.reviewForm.reset();
// When necessary add an initial array element
// (this.reviewForm.get('controlArray') as FormArray).push(new FormControl('Initial Element');

【讨论】：