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?
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 FormsMoudle
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 helpfull
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 ]
})
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();
}));
Update with Angular 7.x.x, encounter the same issue in one of my modules.
If it lies in your independent module, add these extra modules:
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
@NgModule({
imports: [CommonModule, FormsModule], // the order can be random now;
...
})
If it lies in your app.module.ts
, add these modules:
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [ FormsModule, BrowserModule ], // order can be random now
...
})
A simple demo to prove the case.
If you want 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
in the app.module.ts add below lines :
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
You should verify following things if the two way binding does not work.
In html the ngModel should be called this way. There is no dependency on other attribute of the input element
<input [(ngModel)]="inputText">
Make Sure FormsModule is imported into the modules file
app.modules.ts
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HomeComponent // suppose, this is the component in which you are trying to use two ay binding
],
imports: [
BrowserModule,
FormsModule,
// other modules
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Make sure the component in which you are trying to use ngModel for two way binding is added in the declarations of the. Code added in the previous point #2
This is everything that you need to do to make the two way binding using ngModel work, this is validated up to angular 9
After spending hours on this issue found solution here
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
]
})
import form module in app.module.ts.
import { FormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
ContactsComponent
],
imports: [
BrowserModule,HttpModule,FormsModule //Add here form module
],
providers: [],
bootstrap: [AppComponent]
})
In html:
<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">
FormsModule
toimports: []
of the module where you usengModel
. Otherwise post your code. – Günter Zöchbauer