Angular 4：setValue formBuilder 空数组答案

【问题标题】：Angular 4: setValue formBuilder empty arrayAngular 4：setValue formBuilder 空数组
【发布时间】：2020-06-20 12:21:38
【问题描述】：

我有这样的反应形式：

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.

我做错了什么？

【问题讨论】：

对于任何阅读此内容的人：在学习了有关 FormArray 的教程后，我遇到了这个错误。解决方案很简单，只需用一对空方括号 [] 初始化 FormArray：this.formBuilder.array([ ])。我不知道那里的函数调用应该做什么，我只知道它给出了那个错误。

标签： javascript angular typescript angular2-formbuilder

【解决方案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)
}

如果有更好的方法，我愿意提出建议！ :)

【讨论】：

我认为应该是 control.controls.removeAt(i)。因为 console.log(control) 有一个带有名称控件的数组，否则您会收到错误“无法读取属性 'enabled' of null”。
谢谢。这是整个页面中唯一有效的解决方案。
你可以直接使用for-loop，而不是control.clear()。

【解决方案2】：

尝试this.myForm.controls['myFormArray'] = this.formBuilder.array([]); 在您的构造函数中实例化 formBuilder 服务。

【讨论】：

我们仍然在 Angular 7 中这样做
如果 formArray 在像这样清除它之前有一个无效控件，那么这样做会使父表单无效。 Ng

【解决方案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([]));

【讨论】：

请在您的答案中添加一些解释，这有助于 OP 以及在搜索类似问题时可能最终出现在这里的其他人。

【解决方案4】：

我遇到了类似的问题，更新表单后我会收到错误消息，经过大量调查和失败的实验后，我发现 this.myForm.updateValueAndValidity 终于成功了。

【讨论】：