如果ngModel在一个form标签中使用，必须设置name属性或者form

我在Angular 2中得到了这个错误

core. mmm .js:5995 EXCEPTION: Uncaught (in promise): Error: Error in app/model_exposure_currencies/model_exposure_currencies.component.html:57:18 如果ngModel在一个form标签中被使用，则name . ngModel在一个form标签中被使用 属性必须设置或窗体 控件必须在ngModelOptions中定义为'standalone'

示例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()">
324840 次浏览
小开

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

小开

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

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

独立的

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

然而，如果错误地使用了form-tag(就像我的情况有时)，则将form更改为div是另一种选择(但仅当您的样式不需要form-tag时)。

小开

你需要从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>

在你的页面。Ts，实现你的函数来操作表单数据:

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

正如每个开发人员都有一个共同的习惯，不阅读完整的错误，只阅读第一行，然后开始从其他人那里寻找答案:):)我也是其中之一，这就是为什么我在这里:

阅读错误，清楚地说:

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

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

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

小开

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

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

对我来说，解决办法很简单。我将<form>标签更改为<div>，错误就消失了。

小开

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

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

或

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

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

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

试试这个…

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

我注意到，Chrome开发工具有时只在第一个元素上用醒目的红色下划线，即使它正确地设置了名称。这让我一时糊涂。

必须确保在包含ngModel的表单上向每一个元素添加的名字，而不管哪个元素是带下划线的。

小开

在我的例子中，错误发生是因为下面的html标记中多了一行没有的名字属性。

<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>
但是浏览器仍然报告第一行有错误。如果你在这两者之间有其他元素，就很难发现错误的根源。 chrome devtools显示错误的截图 < / p >
小开

对于那些对错误消息本身不惊慌的人来说，只是谷歌一下为什么在这里中的例子不起作用(即当文本输入到输入字段时，动态过滤不会发生):它不会起作用，直到你在输入字段中添加name参数。没有任何东西可以解释为什么管道不能工作，但是错误消息指向这个主题，并根据接受的答案修复它使动态过滤器能够工作。

小开

修理起来很容易。

对我来说，我们在表单中有不止一个输入。我们需要隔离导致错误的输入/行，并简单地添加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属性，这就解决了这个问题。如下:< / p > 

<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属性就可以解决这个问题。

小开 
<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需要的三样东西。

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

小开

像这样在ngmodel字段中添加standalone: true

 <mat-radio-group [(ngModel)]="gender" [ngModelOptions]="{standalone: true}">
<mat-radio-button value="Male">Male</mat-radio-button>
<mat-radio-button value="Female">Female</mat-radio-button>
</mat-radio-group>

提交答案