Angular error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"

Question

I'm using Angular 4 and I am getting an error in the console:

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

How can I resolve this?

Answer 1

In order to use two-way data binding for form inputs you need to import the FormsModule package in your Angular module.

import { FormsModule } from '@angular/forms';  @NgModule({     imports: [          FormsModule           ] 

---

EDIT

Since there are lot of duplicate questions with the same problem, I am enhancing this answer.

There are two possible reasons

• Missing FormsModule, hence Add this to your Module,

  import { FormsModule } from '@angular/forms';  @NgModule({     imports: [         FormsModule           ] 

• Check the syntax/spelling of [(ngModel)] in the input tag

Answer 2

This is a right answer. you need to import 'FormsModule'

first in app.module.ts

**

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

** second in app.component.spec.ts

import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; describe('AppComponent', () => {   beforeEach(async(() => {     TestBed.configureTestingModule({       imports: [         RouterTestingModule,         FormsModule       ],       declarations: [         AppComponent       ],     }).compileComponents();   })); 

Best regards and hope will be helpful.