Angular 4：setValue formBuilder 空數組

Question

我有這樣的反應形式：

constructor(...){
  this.form = this.formBuilder.group({
    name: ['', Validators.compose([Validators.required, Validators.maxLength(50)])],
    memes: this.formBuilder.array([
      this.initMemes('TrollFace')
    ])
  });
}

initMemes (name?) {
  return this.formBuilder.group({
    id: [''], name: [name]
  });
}

稍后我可以添加更多memes ：

addMemes () {
  const control = <FormArray>this.form.controls['memes'];
  control.push(this.initMemes('anyName'));
}

然后如果我得到表單值，我會得到：

this.form.controls['memes'].value - 這里我有數組

但是有一種情況，當我需要將此this.form.controls['memes'].value設置為空數組時，怎么辦？

如果我這樣設置：

this.form.controls['memes'].setValue([])

我收到錯誤： Must supply a value for form control at index: 0.

我做錯了什么？

Answer 1

編輯：

從新版本開始，Angular 現在支持使用clear()清除FormArray ：

(<FormArray>this.form.get('memes')).clear();

---

原文：

嘗試了幾件事： reset() ， setControl() ，但以下是我發現的唯一可行的解​​決方案，它實際上將整個數組重置為[] ，其他選項有效，但他們將表單組留在原地，只是清空了值.

所以我如何讓它工作，是迭代表單數組並刪除循環中具有該特定索引的每個表單組：

const control = <FormArray>this.form.controls['memes'];

for(let i = control.length-1; i >= 0; i--) {
  control.removeAt(i)
}

如果有更好的方法，我願意接受建議！ :)

Answer 2

試試this.myForm.controls['myFormArray'] = this.formBuilder.array([]); 在構造函數中實例化了 formBuilder 服務。

Answer 3

形式

this.form = this._formB.group({
    blocks: this._formB.array([])
});

第一種方法

let fArray = <FormArray>this.form.controls['blocks'];
while (fArray.length !== 0) {
  fArray.removeAt(0)
}

方法二

this.form.setControl('blocks', this._formB.array([]));

Answer 4

我遇到了類似的問題，在更新表單后我會收到上述錯誤，經過大量調查和失敗的實驗，我發現this.myForm.updateValueAndValidity終於成功了。