Question

我是Angular 2/4的初学者。在我的示例项目中，我试图找出如何在for循环中放置多个表单并将每个表单与动态变量相关联。我经历过多个文档并知道该表单可以与单个静态变量（#f）关联为：

<div *ngFor="let item of Collection; let i = index" #f="ngForm">

但我无论如何都无法动态创建变量，例如

<div *ngFor="let item of Collection; let i = index" #f{{i}}="ngForm">

Answer 1

如果您使用的是模型驱动表单，我建议您使用FormArray，它会让您的生活变得轻松。

https://plnkr.co/edit/clTbNP7MHBbBbrUp20vr?p=preview

     <div formArrayName="addresses">
          <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">
            <div class="panel-heading">
              <span>Address {{i + 1}}</span>
              <span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)"></span>
            </div>
            <div class="panel-body" [formGroupName]="i">
              <address [group]="myForm.controls.addresses.controls[i]"></address>
            </div>
          </div>
        </div>

在此示例中，您可以添加所需的地址，这些地址基本上是一组FormGroup

检查：
https://angular.io/api/forms/FormArray
和：
https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

在Angular 2

1 个答案: