Angular 2 two way binding using ngModel is not working
Data BindingTypescriptAngular2 Way-Object-DatabindingData Binding Problem Overview
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);
Data Binding Solutions
Solution 1 - Data Binding
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);
Solution 2 - Data Binding
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){
}
Solution 3 - Data Binding
In my case, I was missing a "name" attribute on my input element.
Solution 4 - Data Binding
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);
Solution 5 - Data Binding
The answer that helped me: https://stackoverflow.com/questions/38886276/the-directive-ngmodel-not-working-anymore-in-rc5
To sum it up: input fields now require property name
in the form.
Solution 6 - Data Binding
In the app.module.ts
import { FormsModule } from '@angular/forms';
Later in the @NgModule decorator's import:
@NgModule({
imports: [
BrowserModule,
FormsModule
]
})
Solution 7 - Data Binding
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>
Solution 8 - Data Binding
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";
},
});
Solution 9 - Data Binding
For newer versions of Angular:
-
-write it as
[(ngModel)] = yourSearch
-
declare a empty variable(property) named as
yourSearch
in.ts
file -
add
FormsModule
inapp.module.ts
file from -@angular/forms;
-
if your application is running, then restart it as you made changes in its
module.ts
file
Solution 10 - Data Binding
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!
Solution 11 - Data Binding
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
Solution 12 - Data Binding
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
Solution 13 - Data Binding
import FormsModule in your AppModule to work with two way binding [(ngModel)] with your
Solution 14 - Data Binding
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,]