Question

我正在尝试使用Angular Reactive Forms通过单击“ +”来生成具有一系列字段的表单。但是，当我尝试在子组件中使用[formControlName]="index"时不起作用。

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

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

Answer 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>

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

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

Angular 6嵌套FormArray

1 个答案: