[Fix] Template Parse Errors Can't Bind To 'ngModel' Since It Isn't A Known Property Of 'input' 2023

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>
}

FormsModule Description:

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.