Angular2 If ngModel is used within a form tag, either the name attribute must be set or the form
我从Angular 2中收到此错误
core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Error in app/model_exposure_currencies/model_exposure_currencies.component.html:57:18
caused by: If ngModel is used within a form tag, either the name
attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.
1 2 3 4 5 6 7 8 | Example 1: <input [(ngModel)]="person.firstName" name="first"> Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"> <td *ngFor="let lag of ce.lags"> <input name="name" [(ngModel)]="lag.name" [ngModelOptions]="{standalone: true}" class="form-control" pattern="[0-9]*(\.[0-9]+)?" required> </td> |
这就是我使用表单标签的方式：
1 | <form #f="ngForm" (ngSubmit)="onSubmit()"> |
如果使用ngForm，则所有具有
1 | <input [(ngModel)]="firstname" name="something"> |
由于每个开发人员都有一个共同的习惯，不要阅读完整的错误，只需阅读第一行并开始寻找其他人的答案:) :)我也是其中一个，这就是为什么我在这里：
阅读错误，清楚地说：
1 2 | Example 1: <input [(ngModel)]="person.firstName" name="first"> Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"> |
我们还需要什么来了解此错误？
使用任何一个选项，一切都会顺利进行。
这两个属性都是必需的，并且还要重新检查所有具有"名称"属性的表单元素。如果您使用的是表单提交概念，则明智的做法是使用div标签代替表单元素。
1 | <input [(ngModel)]="firstname" name="something"> |
在我的情况下，发生此错误是因为在html标记中，下面还有另外一行没有name属性。
1 2 3 4 5 6 7 | <form id="form1" name="form1" #form="ngForm"> <input id="input1" name="input1" [(ngModel)]="metaScript" /> ... <input id="input2" [(ngModel)]="metaScriptMessage"/> </form> |
但是浏览器仍然报告第一行有错误。如果您在这两者之间还有其他因素，就很难发现错误的根源。
当您清楚地看一看控制台时，它将为您提供两个示例。
1 2 | <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"> |
或
我注意到，Chrome开发者工具有时即使仅使用名称正确设置，也有时仅将第一个元素加红色下划线。这让我离开了一段时间。
必须确保为包含ngModel的表单上的每个元素都添加一个名称，而不管哪一个都带有下划线。
修复很容易。
对我来说，表格中有多个输入。我们需要隔离导致错误的输入/行，只需添加
之前：
1 2 3 | <form class="example-form"> <mat-form-field appearance="outline"> |
1 | <mat-select placeholder="Select your option" [(ngModel)]="sample.stat"> <!--HERE --> |
1 2 3 4 5 6 | <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> |
1 2 | <input id="myInput" type="text" placeholder="Enter number" aria-label="Number" matInput [formControl]="myFormControl" required [(ngModel)]="number"> <!--HERE --> |
1 | </mat-form-field> |
1 | <mat-checkbox [(ngModel)]="isRight">Check!</mat-checkbox> <!--HERE --> |
1 | </form> |
后：
我只是为
1 2 3 4 5 6 7 | <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参数添加到输入字段中。什么都没有解释为什么管道不起作用的原因，但是错误消息指向了这个主题，并根据公认的答案对其进行修复，从而使动态滤波器起作用。
尝试这个...
1 2 3 4 5 6 7 8 9 | <input type="text" class="form-control" name="name" placeholder="Name" required minlength="4" #name="ngModel" ngModel> Please enter a name. Enter name greater than 4 characters. |
您需要从page.ts中的@ angular / forms导入{NgForm}；
代码HTML：
1 2 3 4 5 6 | <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中，实现您的功能以处理表单数据：
1 | function(data) {console.log("Name:"data.value.name +" Mail:" + data.value.mail);} |
对我来说，解决方案非常简单。我将