Question

我正在研究Angular表单数据驱动方法，我将表单控件动态添加到FormArray，我使用form.reset（）来重置添加的控件，但是form.reset（）doest没有重置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

在FormControl，FormGroup或FormArray上调用重置只会重置其附加的原生html控件的值。赢了从DOM删除控件。

只有您可以通过组件代码文件（typescript）动态地向FormArray添加控件。这意味着您将动态更新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

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长度

2 个答案: