Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

I’ve got the following error when launching my Angular app, even if the component is not displayed.
I have to comment out the so that my app works.
zone.js:461 Unhandled Promise rejection: Template parse errors:
Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’. (”

Created:
][(ngModel)]=”test” placeholder=”foo” />

“): InterventionDetails@4:28 ; Zone: ; Task: Promise.then ; Value:

I’m looking at the Hero plunker, but I don’t see any difference from my code.
Here is the component file:
import { Component, EventEmitter, Input, OnInit, Output } from ‘@angular/core’;
import { Intervention } from ‘../../model/intervention’;

@Component({
selector: ‘intervention-details’,
templateUrl: ‘app/intervention/details/intervention.details.html’,
styleUrls: [‘app/intervention/details/intervention.details.css’]
})

export class InterventionDetails
{
@Input() intervention: Intervention;

public test : string = “toto”;
}

Solutions/Answers:

Solution 1:

Yes that’s it, in the app.module.ts, I just added :

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

Solution 2:

In order to be able to use two-way data binding for form inputs you need to import theFormsModule package in your Angular module.
For more info see the Angular 2 official tutorial here and the official documentation for forms

Solution 3:

For using [(ngModel)] in Angular 2, 4 & 5+, You need to import FormsModule from Angular form…

Also it is in this path under forms in Angular repo in github:

angular / packages / forms / src / directives / ng_model.ts

Probably this is not a very pleasure for the AngularJs developers as you could use ng-model everywhere anytime before, but as Angular tries to separate modules to use whatever you’d like you to want to use at the time, ngModel is in FormsModule now.

Also if you are using ReactiveFormsModule, needs to import it too.

So simply looks for app.module.ts and make sure you have FormsModule imported in…

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Also this is the current starting comments for Angular4 ngModel in FormsModule:

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

If you’d like to use your input, not in a form, you can use it with ngModelOptions and make standalone true…

[ngModelOptions]="{standalone: true}"

For more info, Look at ng_model in Angular section here

Solution 4:

You need to import the FormsModule

Open app.module.ts

and add line

import { FormsModule } from '@angular/forms';

and

@NgModule({
imports: [
   FormsModule
],
})

Solution 5:

Throwing in this might help someone.

Assuming you have created a new NgModule, say AuthModule dedicated to handling your Auth needs, make sure to import FormsModule in that AuthModule too.

If you’ll be using the FormsModule ONLY in the AuthModule then you wouldn’t need to import the FormModule IN the default AppModule

So something like this in the AuthModule:

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

Then forget about importing in AppModule if you don’t use the FormsModule anywhere else.

Solution 6:

There are two steps you need to follow to get rid of this error

import FormsModule in your app module
Pass it as value of imports in @NgModule decorator

basically app.module.ts should look like below :

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

Hope it helps