Angular2 不能以 ngFor 重复的形式使用 ngModel答案

【问题标题】：Angular2 can't use ngModel in form repeated by ngForAngular2 不能以 ngFor 重复的形式使用 ngModel
【发布时间】：2017-04-05 19:57:31
【问题描述】：

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

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

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

有问题的代码块示例：

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

这里是笨蛋 https://plnkr.co/edit/YNZiCBeyqJoxO5ox5nlC?p=preview

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

【问题讨论】：

我无法使用 Plunker plnkr.co/edit/Bx0zT8F0wENJ2NMZqRAy?p=preview 重现您的错误。但是，name 属性丢失了。
奇怪的是，plunker 在我第二次打开它时没有抛出错误。我的实际代码仍然给了我错误，尽管它已经解决了。谢谢。
糟糕，这是你的 plunkr 通过将 name 属性添加到输入标签来以某种方式工作。
需要添加名称或 [ngModelOptions]="{standalone: true}"。但是没有name，我也遇到了与您在问题中提到的错误不同的错误。

标签： forms angular typescript ngfor angular2-ngmodel

【解决方案1】：

如果在表单标记中使用ngModel，则必须设置name 属性，或者必须在ngModelOptions 中将表单控件定义为“独立”。

以下将正常工作：

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

【讨论】：

将name 属性添加到input 字段会更有意义，而不是将其称为standalone
我也倾向于设置input字段的name属性
来自 Angular 文档 (angular.io/guide/forms)：“在将 [(ngModel)] 与表单结合使用时，需要定义名称属性。”

【解决方案2】：

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

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

【讨论】：