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


216

我从Angular 2中收到此错误

core.umd.js:5995例外:未捕获(已承诺):错误:app / model_exposure_currencies / model_exposure_currencies.component.html:57:18中的错误是由于:如果在表单标签中使用ngModel,则必须将name属性设置为set或表单控件必须在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()">

2
cosider授予其中一个答案是正确的答案
G. Stoynev '19

Answers:


419

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

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


1
名称属性必须具有唯一值吗?
亚历山大·米尔斯

2
从Angular 5文档(angular.io/guide/forms):“将[[ngModel)]与表单结合使用时,必须定义名称属性。”
elshev '18

2
也适用于Angular 7!
coderpc '19

2
我想补充一点,它只有在ngModel在名称之前排在第一位时才起作用。
罗纳德·阿贝拉诺

55

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

阅读错误,清楚地说:

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

我们还需要什么来了解此错误?

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


25
对每种选择的含意/效果进行解释将很有用-随意选择两个选择中的一个似乎不是一个好主意。
迈克尔

2
爱你:)))))
Lola,

1
这是一个很好的解释[ngModelOptions]="{standalone: true}stackoverflow.com/a/38368261/3135317。就我而言,我在表单标签中使用了可怕的ngModel,当我对嵌套数组使用* ngFor *时,name属性必须...错误。模型绑定很好,模板倒空了。“示例1” 可能没有用;“示例2”非常完美。
FoggyDay '19

这个答案在同一周帮助了我两次(显然不是第一次坚持);)
Jay Cummins

30

这两个属性都是必需的,并且还要重新检查所有具有“名称”属性的表单元素。如果您使用的是表单提交概念,则明智的做法是使用div标签代替表单元素。

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

30

在我的情况下,发生此错误是因为在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>

但是浏览器仍然报告第一行有错误。如果您在这两者之间还有其他因素,就很难发现错误的根源。 在此处输入图片说明


16

当您清楚地看一下控制台时,它将给您两个示例。

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

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


16

我注意到,Chrome开发者工具有时即使仅使用名称正确设置,有时也仅将第一个元素加红色下划线。这使我离开了一段时间。

必须确保为包含ngModel的表单上的每个元素添加一个名称,而不管哪一个都带有下划线。


9

修复很容易。

对我来说,表格中有多个输入。我们需要隔离导致错误的输入/行,并简单地添加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属性,从而解决了该问题。如下:selectcheckbox

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


3

您需要从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);}

3

试试这个...

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

3

对于每个不对错误消息本身感到恐慌,而只是在谷歌上寻找解释的人,为什么这里的示例不起作用(即,在文本输入框中输入文本时不进行动态过滤):它将不起作用直到您将name参数添加到输入字段中。什么都没有解释为什么管道不起作用的原因,但是错误消息指向了这个主题,并根据公认的答案对其进行修复,从而使动态过滤器起作用。



2

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


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

2

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


1
这是因为您要删除表单,从而删除了表单提供的所有功能。
astro8891

@ astro8891我不需要功能
John Henckel

0
<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的三件事。

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.