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 error: Error in ./AppComponent class AppComponent_Host – inline template:0:0 caused b... If you're seeing this error when you run your application it's probably because you're trying to use http.get without importing the HttpModule. This is what the error looks like on the browser console: core.umd.js:5995 EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline temp...
Angular2 Tutorial: Creating Awesome Animated Charts with Highcharts Highcharts with Angular2 Today I'm going to show you how you can add some really amazing animated charts to your Angular 2 application. We're going to use a very rich library called Highcharts, it provides a huge variety of charts that you can use on your app. Seriously, they probably have any t...
Angular2: How to Pass Callback Functions to a Component There are lots of situations where it's useful to pass a function to an angular2 component, for instance, when our component is a dialog and we have to perform an specific task when it closes, or pass the action of one of its buttons, or even events like keypress, resize, mouseover, etc. If you're r...
Passing Parameters to an Angular2 Component One of the greatest advantages of using components is reusability, which means once you've create your component you can use it in several places across your project without having to recreate it everytime. But for that to be possible we have to be able to pass parameters to our components, that's w...

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>