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.myForm.updateValueAndValidity 终于成功了。

Answer 4

表格

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

Angular 4: setValue formBuilder 空数组

Angular 4: setValue formBuilder empty array

javascript

angular

typescript

angular2-formbuilder