Can't bind to 'ngModel' since it isn't a known property of 'input' in Angular
I have created a template input text in a small project with Angular 9 as below:
InputTextComponent.ts file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-input-text',
templateUrl: './input-text.component.html',
styleUrls: ['./input-text.component.scss']
})
export class InputTextComponent implements OnInit {
public inputValue : string;
constructor() {
this.inputValue = "two way Binding";
}
ngOnInit() {
}
}
html file
<input type="text" [(ngModel)]="inputValue"/>
When I run the project I get an error:
error TS8002: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.
How can I fix this issue? Thanks for any suggestions.
- V0
Việt Trọng Đỗ Jul 12 2021
To fix this issue you have to import
FormModule
inapp.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 importReactiveFormsModule
as well as to avoid other errors. - D-1
Deepak M Jul 12 2021
In the
app.module.ts
file, I just addedFormsModule
package:import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })
And it works for me!
- N-1
Nguyễn Danh Ngọc Jul 12 2021
Adding below code in
app.module.ts
file solved my issueAdd forms import
import {FormsModule } from '@angular/forms';
then add
FormsModule
in@NgModule
's import section@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, AppRoutingModule, FormsModule ], providers: [], bootstrap: [ AppComponent ] })
I hope it helpful for you.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.