将 NgForm 导出到 Angular 2 中的局部动态变量答案

【问题标题】：Export NgForm to Local Dynamic Variable in Angular 2将 NgForm 导出到 Angular 2 中的局部动态变量
【发布时间】：2018-01-14 04:43:07
【问题描述】：

我是 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">

【问题讨论】：

你的目的是什么？您可以使用相同的名称

标签： angular dynamic-variables

【解决方案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

【讨论】：

谢谢！！这对我有帮助。
酷！很高兴听到这个