Angular2 If ngModel is used within a form tag, either the name attribute must be set or the form

Question

I am getting this error from Angular 2

core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Error in app/model_exposure_currencies/model_exposure_cu

Answer 1

I noticed that the Chrome developer tool sometimes only underlines the first element in swiggly red even if it is correctly set up with a name. This threw me off for a while.

One must be sure to add a name to every element on the form that contains ngModel regardless of which one is squiggly underlined.

Answer 2

It's quite easy for a fix.

For me, we had more than one inputs in the form. We need to isolate the input / line causing error and simply add the name attribute. That fixed the issue for me:

Before:

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

After: i just added the name attribute for select and checkbox and that fixed the issue. As follows:

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

As you see added the name attribute. It is not necessary to be given same as your ngModel name. Just providing the name attribute will fix the issue.

Answer 3

As every developer have a common habit, not to read the complete error, just read the first line and start looking for answer from someone else :):) I am also one of them, that's why I am here:

Read the error, clearly saying:

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

What more we need to understand this error?

Use any one option everything will work smooth.

Answer 4

In my case the error happened because below in html markup one more line existed without the name attribute.

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

But the browser still reports the first row has the error. And it's difficult to discover the source of mistake if you have other elements between these two.

Answer 5

You need import { NgForm } from @angular/forms in your page.ts;

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

In your Page.ts, implement your funcion to manipulate form data:

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

Answer 6

When you clearly look at the console, it will give you two examples. Implement any of these.

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

or

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