Can not bind in angular

Question

I am new to Angular. Trying to use the ng-model directive for 2 way binding

I have tried 2 ways to do it

<!-- <input type="email" class="form-control" id="email" placeholder="EMAIL" ngModel name ="email"> -->
     <input type="email" class="form-control" id="email" placeholder="EMAIL" [(ngModel)]="email">

Both of them are described above

First one is working where and second is not

Could you please explain me the problem in the second line which is not working using [(ngModel)].

Is this an incorrect syntax?

Forms module is already imported in app.module.ts

Answer 1

Add the name attribute in the input field to bind form with name

or

use [ngModelOptions]="{standalone: true}"

<input type="email" class="form-control" name="email" id="email" placeholder="EMAIL" [(ngModel)]="email">

<input type="email" class="form-control" [ngModelOptions]="{standalone: true}" id="email" placeholder="EMAIL" [(ngModel)]="email">

` id="email" placeholder="EMAIL" [(ngModel)]="email">

Answer 2

You need to have the following import in your module:

import { FormsModule } from '@angular/forms';

For more details, you can refer to official documentation here:

https://angular.io/guide/built-in-directives#ngmodel-two-way-binding

Edit: This is a very basic example, using your input element as-is:

https://stackblitz.com/edit/angular-anjdwq?embed=1&file=src/app/app.component.ts

Answer 3

I guess you are using ngForm. In that case, all the input fields which have [(ngModel)]="" must have an attribute name with a value.

<input type="email" class="form-control" id="email" placeholder="EMAIL" [(ngModel)]="email" name="email">