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

Question

我正在研究 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();    
  }

Answer 1

Calling reset on FormControl, FormGroup or FormArray will only reset the values of native html controls they are attached to. It won't delete the controls from the DOM.

向 FormArray 添加控件的唯一方法是动态地通过组件代码文件 (typescript)。这意味着您将动态更新 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

Answer 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');

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

FormArray length does not reset by form.reset()

angular

angular-reactive-forms