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

In order to be able to display the information in the form you would like, you need to give those specific inputs of interest names. I'd recommend you do have:

---

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

Answer 2

For me, the solution was very simple. I changed the <form> tag into a <div> and the error goes away.

Answer 3

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

Those are the three things need to use ngModel inside a formGroup directive.

Note that same name should be used.

Answer 4

For everyone who don't panic with the error message itself, but just googling for the explanation why example from here doesn't work (i.e dynamical filtering doesn't occur when the text is typed into the input field): it will not work until you will add the name parameter in the input field. Nothing points to the explanation why pipe isn't working, but the error message points to this topic and fixing it according to the accepted answer makes the dynamical filter working.

Answer 5

Try this...

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

Answer 6

If ngForm is used, all the input fields which has [(ngModel)]="" must have an attribute name with a value.

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