如何以角度反应形式清除 FormArray 值？答案

【问题标题】：How to clear the FormArray values in angular reactive form?如何以角度反应形式清除 FormArray 值？
【发布时间】：2019-10-30 09:21:30
【问题描述】：

在这里，我想让 FormArray 的长度为零。（据说这个表格一切正常）

profileForm: FormGroup;

ngOnInit() {
   this.profileForm = new FormGroup({
      nod_title: new FormControl(),
      nod_subtitle: new FormControl(null),
      nod_name: new FormControl(null),
      nod_occupation: new FormControl(null),
      nod_description: new FormControl(null),
      nod_tags: new FormArray([new FormControl('hello'), new FormControl('world')]),
    });
  }

 resetTags() {
   if (this.profileForm.value.nod_tags.length) {   // here I tried
     this.profileForm.value.nod_tags.clear();
     console.log(this.profileForm.value.nod_tags)
 }

<button type="button" (click)="resetTags()"> Reset taggs </button>

这里，我想清空 nod_tags 的值，console.log() 应该返回一个空数组。

【问题讨论】：

this.profileForm.get('nod_Tags').clear()，参见文档，angular.io/api/forms/FormArray#clear

标签： angular

【解决方案1】：

我认为这是你想要的方式

resetTags() {
    this.nodTags.clear();
 }

 get nodTags(): FormArray {
   return this.profileForm.get('nod_tags') as FormArray;
 }

我还发了一个小demo

【讨论】：

谢谢您，先生，但这对我不起作用！它在控制台中显示错误（错误类型错误：“this.nodTags.clear is not a function”）。
你添加了我发布的get nodTags() getter 吗？
是的，先生，我已完全按照您的代码进行操作。甚至编辑器也用红色下划线标记了 clear()。
请仔细检查演示。其他方法是使用以下(<FormArray>this.profileForm.get('nod_tags')).clear();。
当我将鼠标悬停在带红色下划线的 clear() 上时，它会显示一条消息 'Property 'clear' does not exist on type 'FormArray'。

【解决方案2】：

在resetTags()中，获取你需要的FormControl对应的值。现在你可以调用reset()就可以了，如下图：

resetTags() {
   this.profileForm.controls['nod_tags'].reset();
}

根据您的评论，要将其设置为空数组，请使用：

resetTags() {
   let arr = <FormArray>this.profileForm.controls['nod_tags'];
   arr.clear();
}

【讨论】：

它有效，但重置 nod_tags 属性后出现空值。这里我需要像这样 [ ] 使 nod_tags 数组为空。
当然，先生，这里设置了 2 个空字符串，但我需要使数组完全为空。谢谢先生。
对不起先生，控制台显示'arr.clear() 不是一个函数'，甚至编辑器用红色下划线标记了clear()。但为什么！有没有其他问题。我的 Angular 版本是 7.2.15，CLI 版本是 7.3.9。
您使用的是哪个版本的 ES？对我来说效果很好。
另外，如果这不起作用，您需要做的就是清除阵列。您已经有了对它的引用（即arr），现在您可以随心所欲地清除它。如果编辑对您不起作用，还有多种其他方法可以清除 js/ts.. 等中的数组

【解决方案3】：

resetTags() {
    const arr = this.profileForm.controls.nod_tags as FormArray;
    while (0 !== arr.length) {
      arr.removeAt(0);
}

这种方法效果很好。谢谢大家。

【讨论】：

【解决方案4】：

从 Angular 8+ 开始，最好的方法是使用 FormArray 提供的 clear() 方法：

// Reset all tags (Angular 8+)
resetTags() {
  const nodTags = this.profileForm.get('nod_tags') as FormArray;

  if ( nodTags.length > 0 )
    nodTags.clear();
}

如果您使用的是 Angular 7 或更低版本，那么 Mizanur 的版本将可以工作。这是使用它的 resetTags() 方法的修改版本：

// Reset all tags (Angular 7 and below)
resetTags() {
  const nodTags = this.profileForm.get('nod_tags') as FormArray;

  while ( nodTags.length > 0 ) {
      nodTags.removeAt(0);
}

【讨论】：

【解决方案5】：

试试这个，

this.form = this._formB.group({
    blocks: this._formB.array(["a","b","c"])
});

this.form.controls['blocks'].value.length = 0;

【讨论】：

【解决方案6】：

还有更简单的方法可以让 nod_tags 为空！

get nod_tagsArray() {
    return this.profileForm.controls.nod_tags as FormArray;
  }

    this.nod_tagsArray.controls =[];

【讨论】：