在 Angular 的表单中动态创建 FormArray 字段答案

【问题标题】：Create dynamically FormArray fields in a form in Angular在 Angular 的表单中动态创建 FormArray 字段
【发布时间】：2020-08-05 04:35:37
【问题描述】：

我正在学习 FormArray 以制作动态表单。我的问题是我必须将 formarray 中的字段与多项选择下拉列表中的选定项目相关联。假设我选择了一个名为“Foo”的选项，那么将创建 3 个提供有关 Foo 信息的字段，并且可以创建更多字段，因此 FormArray。

所以，我已经按照这个教程了解了一点https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/，但我的问题是，只有从一开始就在表单中定义了 FormArray 字段时，这才有效。我正在做的是将所选选项及其字段关联起来的方法是以如下形式动态创建字段：

const idCategoria: string =  '1';
this.indicadorModal.addControl('objetivo.' + idCategoria, new FormGroup(
    {
        objetivos: this.fb.array([this.crearObjetoObjetivo()])
    }
));

这将导致 indicadorModal （它是一个 FormGroup）将具有诸如 objetivo.1 、 objetivo.2 等字段。但是现在我需要这些作为表单数组，但我似乎无法做到我喜欢的教程中说的是，它说控件不存在。这有什么问题吗？

谢谢

【问题讨论】：

你能分享你当前的代码吗 - 最好是在堆栈闪电战中

标签： javascript angular formarray

【解决方案1】：

Ulises，我认为你在混淆概念。动态表单可以是 FormArray 或 FormGroup。我想，你正在寻找 FormGroup，所以，看看docs about FormGroup

如果你有一个 FormGroup 和一个对象数组

  myForm=new FormGroup({})
  fields:any[]=[];

您可以使用 addControl 将 formControl 添加到 formGroup，例如

addFields()
{
     this.myForm.addControl('name',new FormControl())
     this.myForm.addControl('surname',new FormControl())

     this.fields.push({name:'name',label:'Name'})
     this.fields.push({name:'surname',label:'Surname'})
}

您可以遍历 .html 中的数组字段

<form [formGroup]="myForm">
  <div *ngFor="let field of fields">
    {{field.label}}:<input [formControlName]="field.name">
  </div>
</form>

看到它不是 FormArray 而是“动态的”

查看代码in simple stackblitz

【讨论】：