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

尝试了一些事情:FormArray,clear()但是以下是我发现工作的唯一解决方案实际上重置了整个数组reset(),其他选项工作,但他们离开了表单组,只是清空了值.

所以我如何使它工作,是迭代表单数组并删除循环中具有该特定索引的每个表单组:

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

如果有更好的方法,我愿意接受建议!:)

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([]));