ngModel Angular Error: Can't bind to 'ngModel' since it isn't a known property of 'input'
If you are new to Angular, you might have encountered Can't bind to 'ngModel' since it isn't a known property of 'input'
error when you use input element with [(ngModel)]
.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-input-element',
templateUrl: './input-element.component.html',
styleUrls: ['./input-element.component.scss']
})
export class InputElementComponent implements OnInit {
public inputValue : string;
constructor() {
this.inputValue = "two way Binding";
}
ngOnInit() {
}
}
And in input-element.component.html
file I have added an input element with [(ngModel)].
<input type="text" [(ngModel)]="inputValue"/>
When you try to compile the above code you will get following error.
error TS8002: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.
In Angular applications, If you want to use two-way data binding for form inputs in we need to import the FormsModule
from @angular/core
.
To fix Can't bind to 'ngModel' since it isn't a known property of 'input' error
in Angular applications we have to import FormModule
in app.module.ts
file.
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
declarations: []
}
)
If you are using FormBuilder class to create reactive form we have to import ReactiveFormsModule
as well to avoid below error.
Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’