如何在角度 2 的循环中使用 [(ngModel)] 生成双向绑定的名称属性？答案

【问题标题】：How to generate a name attribute for two-way binding using [(ngModel)] in a loop in angular 2?如何在角度 2 的循环中使用 [(ngModel)] 生成双向绑定的名称属性？
【发布时间】：2017-09-06 01:51:07
【问题描述】：

首先，如果使用 [(ngModel)] 绑定输入，我不明白为什么 Angular 2 需要名称属性。否则，我会收到此错误：

    ERROR Error: If ngModel is used within a form tag, either the name
    attribute must be set or the form control must be defined as 
    'standalone' in ngModelOptions.

这通常不是问题，但我如何使用 *ngFor 在循环中执行此操作？索引（如角度 1 中的 $index）可用吗？

【问题讨论】：

你不能使用你正在迭代的名字吗？
*ngFor="let foo of bars; let i=index" 然后你可以使用i 变量。

标签： html angular

【解决方案1】：

解决问题：

首先，我不明白如果使用 [(ngModel)] 绑定输入，为什么 Angular 2 需要 name 属性

从这里收集的一些信息：Official docs for Forms:

首先，我们只需要在表单中使用它。在将[(ngModel)] 与表单结合使用时，名称属性是一个要求。

在内部，Angular 创建 FormControl 实例并将它们注册到您的 NgForm 指令中。 Angular 自动将NgForm 指令附加到<form>-tag。 NgForm 指令为表单元素补充了额外的功能。它包含您为具有ngModel 指令和name 属性的元素创建的控件，并监视它们的属性，包括它们的有效性。

每个FormControl 都以您分配给name 属性的名称注册。因此，这意味着每个名称都必须是唯一的，如果不是，则具有相同名称的每个字段将被评估为一个且相同。

通常，在循环之外，这样做就足够了：

<input [(ngModel)]="item.name" name="name">

但在循环内部，这还不够，因为所有字段都将具有相同的name-attribute。

就像 Eduardo 建议的那样，当你循环时，这可以通过使用索引很容易地解决：

<ul *ngFor="let item of items; let i = index">
    <input [(ngModel)]="item.name" name="name{{i}}"/>
</ul>

【讨论】：

【解决方案2】：

您可以通过这种方式获取索引并使用i 变量明确创建输入名称。

<ul *ngFor="let item of items; let i = index">
    <input name="{{i}}"/>
</ul>

【讨论】：

太好了。谢谢！。不过有两个小修复：1. 使用 let 而不是 * 用于较新的 Angular 版本，2. 用户 {{i}} 而不是 i.