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

Question

我从Angular 2中收到此错误

  

core.umd.js：5995 EXCEPTION：未捕获（在承诺中）：错误：app / model_exposure_currencies / model_exposure_currencies.component.html：57：18出错   由以下原因引起：如果在表单标记中使用了ngModel，则为名称   必须设置属性或表单             必须在ngModelOptions中将控件定义为“独立”。

      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

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

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

Answer 4

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

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

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

Answer 5

我注意到，Chrome开发者工具有时即使仅使用名称正确设置，有时也仅用红色突出显示第一个元素。这使我离开了一段时间。

一个人必须确保在包含ngModel的表单上的每个元素上添加一个名称，无论哪一个都带下划线。

Answer 6

在我的情况下，发生此错误是因为在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 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和select添加了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

您需要从page.ts中的@ angular / forms导入{NgForm};

代码HTML：

<form #values="ngForm" (ngSubmit)="function(values)">
 ...
 <ion-input type="text" name="name" ngModel></ion-input>
 <ion-input type="text" name="mail" ngModel></ion-input>
 ...
</form>

在你的Page.ts中，实现你的功能来操作表单数据：

function(data) {console.log("Name: "data.value.name + " Mail: " + data.value.mail);}

Answer 9

试试这个......

    <input type="text" class="form-control" name="name" placeholder="Name"
                  required minlength="4" #name="ngModel"
                  ngModel>
                  <div *ngIf="name.errors && (name.dirty || name.touched)">
                      <div [hidden]="!name.errors.required" class="alert alert-danger form-alert">
                          Please enter a name.
                      </div>
                      <div [hidden]="!name.errors.minlength" class="alert alert-danger form-alert">
                          Enter name greater than 4 characters.
                      </div>
                  </div>

Answer 10

对于每个不对错误消息本身感到恐慌的人，只是谷歌搜索一下为什么here中的示例不起作用（即，将文本键入到输入中时不进行动态过滤）的解释字段）：在您将名称参数添加到输入字段中之前，该功能将不起作用。什么都没有解释为什么管道不起作用的原因，但是错误消息指向了这个主题，并根据公认的答案对其进行修复，从而使动态滤波器起作用。

Answer 11

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

Answer 12

为了能够以您希望的形式显示信息，您需要提供兴趣名称的特定输入。我建议你有：

<form #f="ngForm" (ngSubmit)="onSubmit(f)"> ...
<input **name="firstName" ngModel** placeholder="Enter your first name"> ...

Answer 13

对我来说，解决方案非常简单。我将<form>标记更改为<div>，错误就消失了。

Answer 14

<select name="country" formControlName="country" id="country" 
       class="formcontrol form-control-element" [(ngModel)]="country">
   <option value="90">Turkey</option>
   <option value="1">USA</option>
   <option value="30">Greece</option>
</select>

name="country"
formControlName="country" 
[(ngModel)]="country" 

这是在formGroup指令中使用ngModel的三件事。

请注意，应使用相同的名称。