Can't bind to 'ngModel' since it isn't a known property of 'input' in Angular
Dung Do Tien
Jul 12 2021
289
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.
Have 3 answer(s) found.
-
V0
Việt Trọng Đỗ Jul 12 2021
To fix this issue you have to import
FormModuleinapp.module.tsfile.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
FormBuilderclass to create reactive form we have to importReactiveFormsModuleas well as to avoid other errors. -
D-1
Deepak M Jul 12 2021
In the
app.module.tsfile, I just addedFormsModulepackage: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.tsfile solved my issueAdd forms import
import {FormsModule } from '@angular/forms';then add
FormsModulein@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.