将 NgForm 导出到 Angular 中的本地动态变量 2

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

将 NgForm 导出到 Angular 中的本地动态变量 2

Export NgForm to Local Dynamic Variable in Angular 2

dynamic-variables

angular