Form数组长度不会通过Form.Reset()重置 [英] FormArray length does not reset by form.reset()

问题描述

我正在研究角度表单数据驱动方法，我将表单控件动态添加到Form数组中，我使用form.Reset()来重置添加的控件，但Form.Reset()不重置Form数组长度，我发现这是一个已知的问题，可以使用这种方法解决，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();    
  }

推荐答案

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

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

因此，在这种情况下，您必须将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 

这篇关于Form数组长度不会通过Form.Reset()重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！