The Error “Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.”, is an error that is invoked when you are working on a angular.js and are using a simple input in my component which uses [(ngModel)]
. Given below is the snippet of the error you might get:
Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'.
I would like to share with you the steps I took to fix the “Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.”
Why “Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.” Error is Seen?
The error, “Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.” is seen because even though ngModel
is a valid Angular directive, this is not available to use by default. The ngModel
belongs to the optional FormsModule
and you must opt-in it to use ngModel
.
The detailed solution to fix the error “Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.”, is given below:
How to Fix”Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.” Error?
To fix the error, you will have to open “app.module.ts
” and then import the FormsModule symbol from the @angular/forms library. Then you will have to add FormsModule
to the imports
array in @NgModule
. The imports
array contains the list of external modules that the application needs, then a simple refresh would fix your error.
To fix the error, “Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.”, you will have to follow the below-mentioned steps:
First you will have to open app.module.ts
and then import the FormsModule symbol from the @angular/forms library.
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
Then you will have to add FormsModule
to the imports
array in @NgModule
. The imports
array will contain a list of external modules that the application needs.app.module.ts , those will be the @NgModule imports.
content_copyimports: [
BrowserModule,
FormsModule
],
Once the browser refreshes, the application will work again.
BrowseModule Description:
Exports required infrastructure for all Angular apps. Included by default in all Angular apps created with the CLI new
command. Re-exports CommonModule
and ApplicationModule
, making their exports and providers available to all apps.
class BrowserModule {
static withServerTransition(params: { appId: string; }): ModuleWithProviders<BrowserModule>
}
Exports the required providers and directives for template-driven forms, making them available for import by NgModules that import this module.
class FormsModule {
}
This should fix the error, “Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.”
Conclusion
To fix the error “Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.”, you will have to open app.module.ts
and then import the FormsModule symbol from the @angular/forms library.
Then you will have to add FormsModule
to the imports
array in @NgModule
. The imports
array contains the list of external modules that the application needs, then a simple refresh would fix your error.