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

Question

我从Angular 2收到此错误

core.umd.js:5995 EXCEPTION:未捕获(在承诺中):错误:app/model_exposure_currencies/model_exposure_currencies.component.html:57:18中的错误:如果在表单标记中使用了ngModel,则name属性必须为set或表单控件必须在ngModelOptions中定义为"standalone".

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 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

如果使用ngForm,则所有[(ngModel)]=""必须具有值的属性名称的输入字段.

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

Answer 2

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

阅读错误,清楚地说:

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

我们还需要了解这个错误吗？

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

Answer 3

这两个属性都是必需的,并且还要重新检查所有表单元素都有"name"属性.如果你使用表单提交概念,其他明智的只是使用div标签而不是表单元素.

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

Answer 4

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

<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 5

当你清楚地看到控制台时.它会给你两个例子.实现其中任何一个.

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

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

Answer 6

我注意到,Chrome开发人员工具有时只会在swiggly red中强调第一个元素,即使它已正确设置了名称.这让我失去了一段时间.

必须确保为包含ngModel的表单上的每个元素添加一个名称,而不管哪个是粗体下划线.

Answer 7

修复起来很容易。

对我来说，我们在表单中有不止一个输入。我们需要隔离导致错误的输入/行并简单地添加name属性。这为我解决了这个问题：

前：

<form class="example-form">

    <mat-form-field appearance="outline">

      <mat-select placeholder="Select your option" [(ngModel)]="sample.stat"> <!--HERE -->

          <mat-option *ngFor="let option of actions" [value]="option">{{option}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Enter number</mat-label>

      <input id="myInput" type="text" placeholder="Enter number" aria-label="Number"
        matInput [formControl]="myFormControl" required [(ngModel)]="number">  <!--HERE -->

    </mat-form-field>

    <mat-checkbox [(ngModel)]="isRight">Check!</mat-checkbox> <!--HERE -->

  </form>

之后： 我刚刚name为selectand添加了属性，并checkbox解决了问题。如下：

<mat-select placeholder="Select your option" name="mySelect" 
  [(ngModel)]="sample.stat"> <!--HERE: Observe the "name" attribute -->

<input id="myInput" type="text" placeholder="Enter number" aria-label="Number"
        matInput [formControl]="myFormControl" required [(ngModel)]="number">  <!--HERE -->

<mat-checkbox name="myCheck" [(ngModel)]="isRight">Check!</mat-checkbox> <!--HERE: Observe the "name" attribute -->

如您所见，添加了name属性。没有必要与您的ngModel名字相同。只需提供name属性即可解决问题。

Answer 8

您没有提到您正在使用的版本，但如果您使用的是 rc5 或 rc6，那么“旧”样式的表单已被弃用。看看这个关于“新”表单技术的指导：https://angular.io/docs/ts/latest/guide/forms.html