Angular2 Error: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

Lots of people are having this problem since Angular2 introduced NgModule, this error occurs when you try to use something from an specific module without importing it, this is how the error looks on the console:

zone.js:355 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <input type="text" class="form-control" id="name"
               required
               [ERROR ->][(ngModel)]=name name="name" >
        <div [hidden]="name.valid || name.pristine" 
             clas"): FormComponent@4:15 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:() Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <input type="text" class="form-control" id="name"
               required
               [ERROR ->][(ngModel)]=name name="name" >
        <div [hidden]="name.valid || name.pristine" 
             clas"): FormComponent@4:15
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
    at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53)
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85)
    at Set.forEach (native)
    at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:203:28)
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:96:43)
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:462:57
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:236:37)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:136:47)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386ZoneTask.invoke @ zone.js:308
zone.js:357 Error: Uncaught (in promise): Error: Template parse errors:()

All you have to do to fix this is to import the FormsModule on your app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { FormsModule }   from '@angular/forms';
 
@NgModule({
  imports:      [ BrowserModule, FormsModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Recommended for you

6 comments on “Angular2 Error: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

  1. Fabián

    Hello, I have the same problem but the solutions not works for me.

    I have

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

    and

    @NgModule({
      imports: [
        BrowserModule,    
        FormsModule,
        routing,
        SmartadminModule.forRoot(),
        UserModule.forRoot(),
      ],
      declarations: [
        AppComponent
      ],
      providers: [UserService],
      bootstrap: [AppComponent]
    })

    In the app.module.ts (and more code) and in the component have an class with the message property and, finaly, in the view, have:

    <input type=”text” name=”puesto” [(ngModel)]=”puesto” placeholder=”Puesto” id=”puesto”>

    But I have the same error in console.

    some idea? thanks!

      1. Bhargav

        Hi Leonardo Jines, I am only starting to learn today and I am not sure what is wrong in the below code. I have imported FormsModule globally and also have it in the imports array. Only this 2way binding is not working and rest of what I have tested today work! Please let me know what is wrong here. Thanks in advance!

        app.module.ts
        ———————————

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

        main.ts
        ———————————

        import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
        import { AppModule } from './app.module';
        const platform = platformBrowserDynamic();
        platform.bootstrapModule(AppModule);

        app.component.ts
        ———————————

        Full Name: {{firstName}} {{lastName}}
        exported class from this component below:
        export class AppComponent {
        	public firstName;
        	public lastName;

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>