Angular error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"
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
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.
Your ngModel
is not working because it's not a part of your NgModule
yet.
You have to tell the NgModule
that you have authority to use ngModel
throughout your app, You can do it by adding FormsModule
into your app.module.ts
-> imports
-> []
.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [ FormsModule ], // HERE
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
All the above mentioned solutions to the problem are correct.
But if you are using lazy loading, FormsModule
needs to be imported in the child module which has forms in it. Adding it in app.module.ts
won't help.
I ran into this error when testing my Angular 6 App with Karma/Jasmine. I had already imported FormsModule
in my top-level module. But when I added a new component that used [(ngModel)]
my tests began failing. In this case, I needed to import FormsModule
in my TestBed
TestingModule
.
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule
],
declarations: [
RegisterComponent
]
})
.compileComponents();
}));