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

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动态的。因此，调用 reset在 FormArray只会清除动态添加的控件的值(将控件设置为其初始状态。例如输入框的空字符串)。另一方面，重置 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