Angular 2 two way binding using ngModel is not working

Question

Can't bind to 'ngModel' since it isn't a know property of the 'input' element and there are no matching directives with a corresponding property

Note: im using alpha.31

import { Component, View, bootstrap } from 'angular2/angular2'

@Component({
    selector: 'data-bind'
})
@View({
    template:`
        <input id="name" type="text" 
            [ng-model]="name" 
            (ng-model)="name = $event" />
        {{ name }}
    ` 
})
class DataBinding { 
    name: string;

    constructor(){
        this.name = 'Jose';
    }
}

bootstrap(DataBinding);

Pankaj Parkar · Accepted Answer · 2017-01-13T06:54:29.203

Angular has released its final version on 15th of September. Unlike Angular 1 you can use ngModel directive in Angular 2 for two way data binding, but you need write it in a bit different way like [(ngModel)] (Banana in a box syntax). Almost all angular2 core directives doesn't support kebab-case now instead you should use camelCase.

Now ngModel directive belongs to FormsModule, that's why you should import the FormsModule from @angular/forms module inside imports metadata option of AppModule(NgModule). Thereafter you can use ngModel directive inside on your page.

app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
    <input type="text" [(ngModel)]="myModel"/>
    {{myModel}}
  `
})
export class AppComponent { 
  myModel: any;
}

app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ], //< added FormsModule here
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Demo Plunkr

Thank you for `Banana in a box syntax` - now I'll never forget which one goes on the outside! — Kinglish, May 09 '22 at 21:45

score 57 · Answer 2 · answered Mar 04 '17 at 20:14

Key Points:

ngModel in angular2 is valid only if the FormsModule is available as a part of your AppModule.
ng-model is syntatically wrong.
square braces [..] refers to the property binding.
circle braces (..) refers to the event binding.
when square and circle braces are put together as [(..)] refers two way binding, commonly called banana box.

So, to fix your error.

Step 1: Importing FormsModule

import {FormsModule} from '@angular/forms'

Step 2: Add it to imports array of your AppModule as

imports :[ ... , FormsModule ]

Step 3: Change ng-model as ngModel with banana boxes as

 <input id="name" type="text" [(ngModel)]="name" />

Note: Also, you can handle the two way databinding separately as well as below

<input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/>

valueChange(value){

}

score 30 · Answer 3 · answered Nov 29 '19 at 00:41

30

In my case, I was missing a "name" attribute on my input element.

answered Nov 29 '19 at 00:41

Konstantin Zlatkov

531
6
5

Good lord!! Thanks. – Naseem Ahamed Sep 27 '21 at 13:17
This was my problem too – Heila Al-Mogren Apr 25 '22 at 11:11

codef0rmer · Answer 4 · 2016-10-05T12:51:14.613

As per Angular2 final, you do not even have to import FORM_DIRECTIVES as suggested above by many. However, the syntax has been changed as kebab-case was dropped for the betterment.

Just replace ng-model with ngModel and wrap it in a box of bananas. But you have spilt the code into two files now:

app.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'ng-app',
  template: `
    <input id="name" type="text" [(ngModel)]="name"  />
    {{ name }}
  `
})
export class DataBindingComponent {
  name: string;

  constructor() {
    this.name = 'Jose';
  }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DataBindingComponent } from './app'; //app.ts above

@NgModule({
  declarations: [DataBindingComponent],
  imports:      [BrowserModule, FormsModule],
  bootstrap:    [DataBindingComponent]
})
export default class MyAppModule {}

platformBrowserDynamic().bootstrapModule(MyAppModule);

score 8 · Answer 5 · edited May 23 '17 at 12:34

8

The answer that helped me: The directive [(ngModel)]= not working anymore in rc5

To sum it up: input fields now require property name in the form.

edited May 23 '17 at 12:34

Community

1
1

answered Jan 23 '17 at 12:34

Ophir Stern

1,277
12
22

Yes, I had the same problem. I put the name attribute in input and worked – vrbsm Nov 16 '19 at 21:22
what the actual heck? why does it even need that attribute? this was the most unexpected solution for me. – Nika Kasradze Jul 10 '20 at 13:31

score 6 · Answer 6 · answered Feb 12 '21 at 07:28

6

Note : To allow the ngModel exists Independently inside reactive form, we have to use ngModelOptions as follows:

 [ngModelOptions]="{ standalone: true }"

For Example :

 <mat-form-field appearance="outline" class="w-100">
            <input
              matInput 
              [(ngModel)]="accountType"
              [ngModelOptions]="{ standalone: true }"
            />
 </mat-form-field>

answered Feb 12 '21 at 07:28

mabdullahse

3,474
25
23

great, it worked – irous Jul 12 '23 at 19:14

score 4 · Answer 7 · answered Apr 10 '17 at 15:57

4

In the app.module.ts

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

Later in the @NgModule decorator's import:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

answered Apr 10 '17 at 15:57

M Thomas

1,062
1
10
12

score 3 · Answer 8 · answered Jan 19 '16 at 04:06

Angular 2 Beta

This answer is for those who use Javascript for angularJS v.2.0 Beta.

To use ngModel in your view you should tell the angular's compiler that you are using a directive called ngModel.

How?

To use ngModel there are two libraries in angular2 Beta, and they are ng.common.FORM_DIRECTIVES and ng.common.NgModel.

Actually ng.common.FORM_DIRECTIVES is nothing but group of directives which are useful when you are creating a form. It includes NgModel directive also.

app.myApp = ng.core.Component({
    selector: 'my-app',
    templateUrl: 'App/Pages/myApp.html',
    directives: [ng.common.NgModel] // specify all your directives here
}).Class({
    constructor: function () {
        this.myVar = {};
        this.myVar.text = "Testing";
    },

});

FYI NgModel is in FORM_DIRECTIVES, so you could also: directives: [ng.common.FORM_DIRECTIVES] — Peter J. Hart, Jan 27 '16 at 21:09
@PeterJ.Hart, Actually `ng.common.NgModel` contains the defenition for the directive `ngModel`. `ng.common.FORM_DIRECTIVES` is grouping some directive's including `ngModel` which are useful if forms. So we don't want to include each and every directive's for the form just include `ng.common.FORM_DIRECTIVES` — Abhilash Augustine, Jan 28 '16 at 03:48

score 2 · Answer 9 · answered Jun 16 '21 at 11:24

2

These things are missing/ Wrong:

Import FormsModule in imports array of module (ngModel requires FormsModule)
ngModel is written as: [(ngModel)]="modelName"

This way, It will work fine!

answered Jun 16 '21 at 11:24

Sarthak Maheshwari

492
3
6

score 1 · Answer 10 · edited Jan 12 '21 at 13:00

1

For newer versions of Angular:

-write it as [(ngModel)] = yourSearch
declare a empty variable(property) named as yourSearch in .ts file
add FormsModule in app.module.ts file from - @angular/forms;
if your application is running, then restart it as you made changes in its module.ts file

edited Jan 12 '21 at 13:00

ata

3,398
5
20
31

answered Nov 30 '20 at 07:39

Rishabh Sharma

11
2

score 0 · Answer 11 · edited Feb 22 '17 at 05:43

0

instead of ng-model you can use this code:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<input #box (keyup)="0">
    <p>{{box.value}}</p>`,
})
export class AppComponent  {}

inside your app.component.ts

edited Feb 22 '17 at 05:43

Ondra Žižka

43,948
41
217
277

answered Feb 07 '17 at 09:30

anil

9
1

score 0 · Answer 12 · edited Oct 09 '18 at 09:03

0

Add below code to following files.

app.component.ts

<input type="text" [(ngModel)]="fname" >
{{fname}}
export class appcomponent {
fname:any;
}

app.module.ts

import {FormsModule} from '@angular/forms';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent],
bootstrap:    [ AppComponent ]
})

Hope this helps

edited Oct 09 '18 at 09:03

User123456

2,492
3
30
44

answered Oct 09 '18 at 08:40

KarunKumarReddy Mora

1

score 0 · Answer 13 · answered May 12 '20 at 08:16

0

import FormsModule in your AppModule to work with two way binding [(ngModel)] with your

answered May 12 '20 at 08:16

1

When possible, please make an effort to provide additional explanation instead of just code. Such answers tend to be more useful as they help members of the community and especially new developers better understand the reasoning of the solution, and can help prevent the need to address follow-up questions. – Rajan May 12 '20 at 08:37

score 0 · Answer 14 · answered Oct 07 '21 at 21:57

0

if you are using lazy loading module, you need to import ngModule and formModule in the current module. example:

//shared.module.ts
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'

imports: [
    FormsModule,]

answered Oct 07 '21 at 21:57

nativelectronic

646
4
11

score 0 · Answer 15 · answered Jan 31 '23 at 19:51

0

Adding a name property solved the problem for me

answered Jan 31 '23 at 19:51

Ghizlane KASSIMI

1
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 03 '23 at 10:48

Angular 2 two way binding using ngModel is not working

15 Answers15

Linked