Angular2 如果在表单标签中使用 ngModel，则必须设置名称属性或表单答案

【问题标题】：Angular2 If ngModel is used within a form tag, either the name attribute must be set or the formAngular2 如果在表单标签中使用 ngModel，则必须设置名称属性或表单
【发布时间】：2017-01-11 18:59:52
【问题描述】：

我从 Angular 2 收到此错误

core.umd.js:5995 例外：未捕获（承诺）：错误：app/model_exposure_currencies/model_exposure_currencies.component.html:57:18 中的错误由以下原因引起：如果在表单标签中使用 ngModel，则名称必须设置属性或表单控件必须在 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()">

【问题讨论】：

考虑将其中一个答案作为正确答案

标签： angular angular-forms

【解决方案1】：

如果使用 ngForm，所有具有[(ngModel)]="" 的输入字段都必须有一个属性 name 和一个值。

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

独立

通过设置 [ngModelOptions]="{standalone: true}" 告诉 Angular 类似，忽略表单和/或 ngForm，只需将其绑定到 firstname 变量即可。

但是，如果错误地使用了form-tag（有时就像我的情况一样），将form 更改为div 是另一种选择（但前提是您的样式不需要form-tag） .

【讨论】：

在angular.io/docs/ts/latest/api/forms/index/…中搜索“名称属性”
name 属性是否必须具有唯一值？
来自 Angular 5 文档 (angular.io/guide/forms)：“在将 [(ngModel)] 与表单结合使用时，需要定义名称属性。”
也适用于 Angular 7！
我想补充一点，它只有在 ngModel 在名称之前才有效。

【解决方案2】：

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

阅读错误，清楚地说：

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

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

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

【讨论】：

解释每种替代方案的含义/效果会很有用 - 任意选择两者中的一个似乎不是一个好主意。
这里有一个很好的解释 [ngModelOptions]="{standalone: true}:stackoverflow.com/a/38368261/3135317。在我的例子中，当我有一个嵌套数组的 `*ngFor* 时，我得到了可怕的`ngModel 在表单标签中使用，或者 name 属性必须...` 错误。模型绑定很好，模板被拒绝了。 “示例 1”不能有效； “示例 2”非常完美。
这个答案在同一周帮助了我两次（显然第一次没有坚持）;)
如答案中所述，解决方案在于错误本身，我无法在第一眼中阅读它，正如答案中再次提到的那样:) 谢谢，它有效。

【解决方案3】：

在我的例子中，错误发生是因为在下面的 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>

但是浏览器还是报第一行有错误。如果您在这两者之间有其他元素，则很难发现错误的根源。

【讨论】：

【解决方案4】：

这两个属性都是必需的，并重新检查所有表单元素是否具有“名称”属性。如果您使用的是表单提交概念，否则只需使用 div 标签而不是表单元素。

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

【讨论】：

【解决方案5】：

我注意到 Chrome 开发者工具有时只会在第一个元素下划线，即使它正确设置了名称也是如此。这让我有一段时间不高兴。

必须确保将 name 添加到包含 ngModel 的表单上的每个元素，无论哪个带有波浪线下划线。

【讨论】：

哇！谢谢！这花了我一段时间！

【解决方案6】：

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

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

或

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

【讨论】：

不要随便选一个，你要明白自己在做什么
@User2585，我同意你的观点，但你能详细说明一下区别吗？我发现每个人都建议使用“名称”属性。但是没有人解释使用“name”属性的意义究竟是什么？
@PrajjwalGupta 如果你想让 ngModel 成为 ngForm 的一部分，你需要给它（表单控件）一个名称，那么表单值将有一个具有给定名称的属性（在这种情况下首先）输入的值。如果由于某种原因您不希望 ngModel 成为 ngForm 的一部分，则可以指定 [ngModelOptions]="{standalone:true}"，然后您没有名称

【解决方案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>

之后： 我刚刚为select 和checkbox 添加了name 属性，这就解决了这个问题。如下：

<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 属性即可解决此问题。

【讨论】：

【解决方案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);}

【讨论】：

【解决方案9】：

对于不对错误消息本身感到恐慌的每个人，只是在谷歌上搜索为什么来自here 的示例不起作用（即在输入字段中键入文本时不会发生动态过滤） : 除非您在输入字段中添加名称参数，否则它不会起作用。没有任何东西可以解释为什么管道不工作，但是错误消息指向这个主题并根据接受的答案修复它使动态过滤器工作。

【讨论】：

【解决方案10】：

试试这个...

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

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

【讨论】：

这是因为您要移除表单，从而移除表单提供的所有功能。
@astro8891 我不需要功能

【解决方案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 需要做的三件事。

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

【讨论】：