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

首先，我不明白为什么如果使用[（ngModel）]绑定输入，Angular 2需要名称属性。否则，我得到这个错误：如何在角度2的循环中使用[（ngModel）]生成双向绑定的名称属性？

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）是否可用？

来源

2017-04-10 newman

不能使用你迭代什么名字？ –

'* ngFor =“let foo of bars; let i = index”'那么你可以使用'i'变量。 – n00dl3

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

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

来源

2017-04-10 21:25:03

太好了。谢谢！。虽然有两个小的修正：1.使用let而不是*来获得更新的角色版本，2.用户{{i}}而不是i。 – newman

更新了谢谢！ –

为了解决这样的问题：

First of all, I don't understand why Angular 2 requires a name attribute if binding input using [(ngModel)]

一些信息从这里云集：Official docs for Forms：

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

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

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

通常情况下，一个循环之外，就足以做到：

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

但内循环，这将是不够的，因为所有的领域将具有相同的name -attribute。

所以像由爱德华建议，当你循环，这可以很容易地通过使用索引来解决：

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

来源

2017-04-11 09:44:44 Alex

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

回答

相关问题