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

Question

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

Answer 1

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.:
 * ```
 * 
{{myModel.valid}}
 * 
 * ```
 * 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