forms - Angular2 不能以 ngFor 重复的形式使用 ngModel

Question

如何将 ngModel 用于 ngFor 重复的多个表单的输入？

当我尝试这样做时，Angular2 给了我错误。

错误：访问属性“拒绝”的权限被拒绝

有问题的代码示例块：

<div *ngFor="let item of items">
    <form name="itemForm">
        {{item.name}}<input [(ngModel)]="item.name">
    </form>
</div>

这是 plunker https://plnkr.co/edit/YNZiCBeyqJoxO5ox5nlC?p=preview

如果我删除表单标签，它会毫无问题地运行，但我需要它，所以我可以在所有输入上使用 enter 键来更新他们自己表单中的相应数据。

Answer 1

如果ngModel在表单标签中使用，则name必须设置属性或表单控件必须在ngModelOptions.

下面将正常工作，没有任何错误：

<div *ngFor="let item of items">
  <form name="itemForm">
    {{item.name}}<input [(ngModel)]="item.name" [ngModelOptions]="{standalone: true}">
  </form>
</div>

Answer 2

正如@ranakrunal9 所指出的，您可以为输入使用唯一的名称属性。这里的代码：

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