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

Angular2: Uncaught (in promise): Error: Cannot match any routes: ” If you're specifying the routes on your project for the first time you may see the following error on the console when you run it: core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''ErrorHandler.handleError @ core.umd.js:3462next @ core.umd.js:6924schedulerFn @...
Creating an Angular2 Image Gallery In order to make this tutorial easier for beginners I'm going to start by creating the simplest possible gallery, from there I'm going to develop and add more functionalities to it, which will increasingly make the gallery more complex as we proceed. If you are already familiar and have some experie...
Creating an Angular2 Datatable from Scratch Some time ago I've posted a tutorial on how to create a datatable with ag-grid, it didn't take long before people start complaining that ag-grid wasn't working the way I described in the tutorial, that's because angular2 is changing rapidly rendering the component and/or the tutorial obsolete. To...
Creating an Angular2 Datatable from Scratch PART 2: Filtering the Data Continuing from where we stopped at Part 1, today we're going to add the filter functionality to the table, but before we start let's do some styling. I'm going to use Bootstrap, but if you don't want you don't have to, feel free to style your component as you like. But if you decide to use Bootstra...

8 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;
  2. mencio

    i’ve added
    import { FormsModule, ReactiveFormsModule } from ‘@angular/forms';

    and
    imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    IonicModule.forRoot(MyApp),

    ],

    it’s still not working

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>