Angular2 如果在表单标记中使用 ngModel，则必须设置 name 属性或表单

Question

我从Angular 2得到这个错误

core.umd。js:5995异常：未捕获（promise中）：错误：app/model_exposure_currencies/model\u exposurement_curmencies.component中的错误。html:57:18原因：如果在表单标记中使用ngModel，则必须设置name属性，或者必须在ngModelOptions中将表单控件定义为“独立”。

示例 1：

<input [(ngModel)]="person.firstName" name="first">

例2：

<input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"> 

<td *ngFor="let lag of ce.lags">
    <div class="form-group1">
        <input name="name" [(ngModel)]="lag.name" [ngModelOptions]="{standalone: true}"  class="form-control" pattern="[0-9]*(\.[0-9]+)?" required>
    </div>
</td>

我是这样使用表单标签的:

<form #f="ngForm" (ngSubmit)="onSubmit()">

Answer 1

在我的情况下，发生了错误，因为在html标记的下面还有一行没有name属性。

html prettyprint-override"><form id="form1" name="form1" #form="ngForm">
    <div class="form-group">
        <input id="input1" name="input1" [(ngModel)]="metaScript" />
        ... 
        <input id="input2" [(ngModel)]="metaScriptMessage"/>
    </div>
</form>

Answer 2

由于每个开发人员都有一个共同的习惯，不去阅读完整的错误，只阅读第一行，并开始从其他人那里寻找答案:))我也是其中之一，这就是我在这里的原因:

阅读错误，明确地说:

Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

我们还需要什么来理解这个错误？

使用任何一个选项，一切都会顺利进行。

Answer 3

如果使用ngForm，所有具有< code >[(ng model)]" " 的输入字段必须有一个带值的属性名称。

<input [(ngModel)]="firstname" name="something">

通过设置[ngModelOptions]=“{standalone： true}”，告诉Angular类似的东西，忽略形式和/或ngForm，只需将其绑定到名字变量即可。

但是，如果错误地使用了＜code＞表单＜/code>-tag（就像在我的例子中，有时），则将＜code＞form＜/code＞更改为＜code＞div＜/code＞是另一种选择（但仅当您的样式不需要＜code＞form＜/code>-tag时）。