CODEWITHSUNDEEP
angular
Ashish
Ashish

Reputation: 469

Can not bind in angular

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

Upvotes: 0

Views: 178

Answers (3)

Kien Nguyen
Kien Nguyen

Reputation: 2701

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

Upvotes: 0

sandeep
sandeep

Reputation: 76

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

Upvotes: 1

Umair Hafeez
Umair Hafeez

Reputation: 407

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

Upvotes: 0

Related Questions