Angular 6 嵌套 FormArray答案

【问题标题】：Angular 6 Nested FormArrayAngular 6 嵌套 FormArray
【发布时间】：2019-02-04 23:04:15
【问题描述】：

我正在尝试制作一个表单，其中包含通过使用 Angular Reactive Forms 单击“+”生成的字段数组。但是，当我尝试在子组件中使用 [formControlName]="index" 时，它不起作用。

首先它是说formControlName 应该有一个带有FormGroup 的父级，我通过它并添加了它。现在它说Cannot find control name with unspecified name attribute。在 Angular 文档中，据说可以将 FormArray 与 [formControlName] 和索引一起使用，因为没有名称。

这就是我所拥有的 https://stackblitz.com/edit/angular-runxfe

【问题讨论】：

为什么你的表单中有novalidate 但你有验证器？
您的问题是您有一个表格，并且您将这些索引指定为您不存在的表格的一部分。您必须在此处添加它们 this.fb.group({...}) 作为文本添加数字 1:'' 作为属性，它会在您第一次按 + 号时工作...现在您必须弄清楚如何将所有这些索引动态添加到您的 fb.group 对象

标签： javascript angular typescript

【解决方案1】：

我已经解决了你的问题。您需要在此处传递 formGroupName：

<app-site-form-feature 
       *ngFor="let feature of features.controls; let last = last; let index = index; let first = first" [formGroupName]="index"
        [last]="last" [index]="index" [first]="first"
         (addFeature)="addFeature()" (removeFeature)="removeFeature(index, first, last)">
</app-site-form-feature>

子组件的 HTML 如下所示：

<div class="row no-gutters form-group">
  <input type="text" class="form-control px-2 col-10">
  <span class="btn btn-outline-danger" (click)="removeFeature.emit(index, first, last)">-</span>
  <span class="btn btn-success" *ngIf="last" (click)="addFeature.emit($event,index)">+</span>
</div>

看看这个 stacblitz https://stackblitz.com/edit/angular-v8zkz2

您也可以参考本指南： https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

【讨论】：