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            lt input id  name  type  text                ng-model   name                ng-model   name    event    gt             name              class DataBinding        name  string       constructor            this name    Jose            bootstrap DataBinding

User · Accepted Answer

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

User · Answer

Add below code to following files   app component ts   lt input type  text    ngModel    fname   gt    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

User · Answer

Note   To allow the ngModel exists Independently inside reactive form  we have to use ngModelOptions as follows    ngModelOptions   quot   standalone  true   quot   For Example     lt mat-form-field appearance  quot outline quot  class  quot w-100 quot  gt               lt input               matInput                  ngModel    quot accountType quot                 ngModelOptions   quot   standalone  true   quot                gt    lt  mat-form-field gt

User · Answer

import FormsModule in your AppModule to work with two way binding   ngModel   with your

User · Answer

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     lt input id  name  type  text    ngModel    name    gt    Note  Also  you can handle the two way databinding separately as well as below    lt input id  name  type  text   ngModel   name   ngModelChange   valueChange  event    gt   valueChange value

User · Answer

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

User · Answer

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

User · Answer

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         lt input id  name  type  text    ngModel    name     gt         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

User · Answer

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

User · Answer

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

User · Answer

In the app module ts  import   FormsModule   from   angular forms     Later in the  NgModule decorator s import    NgModule   imports    BrowserModule  FormsModule

User · Answer

instead of ng-model you can use this code   import   Component   from   angular core     Component     selector   my-app     template    lt input  box  keyup   0  gt       lt p gt   box value   lt  p gt       export class AppComponent       inside your app component ts

[data-binding] Angular 2 two way binding using ngModel is not working

Examples related to data-binding

Examples related to typescript

Examples related to angular

Examples related to 2-way-object-databinding