Angular 2: template parsing errors: cannot bind to 'ngModel' as this is not a known property of 'input'

Question

I received this message when I used two-way binding [(ngModel)]

Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. 

I understand that importing FormsModule is supposed to fix this problem as many people got here. However, I had a FormsModule imported, but it doesn't help, the problem still exists

Definitely something else fails with my code. Can you shed some light. Here is my app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { RouterModule, Routes } from '@angular/router'; import { ValidationModule } from './validation/validation.module'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app.module.routing'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, ValidationModule, AppRoutingModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

here is my app.routing.module.ts

 import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' import { Home1Component } from './home1.component'; import { Home2Component } from './home2.component'; const appRoutes = [ { path: 'home1', component: Home1Component }, { path: 'home2', component: Home2Component }, { path: 'validation', loadChildren: './validation/validation.module#ValidationModule'} ]; @NgModule({ declarations:[ Home1Component, Home2Component ], imports: [ RouterModule.forRoot(appRoutes) ], exports:[ RouterModule ] }) export class AppRoutingModule { } 

and here is my html

 <h1> home 1 </h1> <form> <input [(ngModel)]="currentHero.name"> <button type="button" (click)="onOkClicked()">Ok</button> </form> 

I am adding my source code here, I am using angular-cli source

Answer 1

if you want to use the reactive forms you need to add: ReactiveFormsModule

 @NgModule({ declarations:[ Home1Component, Home2Component ], imports: [ RouterModule.forRoot(appRoutes), ReactiveFormsModule, ], exports:[ RouterModule ] }) 

Answer 2

You need to add the FormsModule to import into the module in which you use its directives:

 @NgModule({ declarations:[ Home1Component, Home2Component ], imports: [ RouterModule.forRoot(appRoutes), FormsModule, // <<<=== missing ], exports:[ RouterModule ] })