Can’t bind to ngModel in Angular

Introduction

This error typically occurs because the required module is missing, the component is not configured correctly, or Angular cannot recognize the ngModel directive.

This issue is one of the most common issues faced by developers while working with Angular forms.

Q: When does the issue happen?

Ans: If you are using [(ngModel)], but the FormsModule is not imported.

Example of the Error


<input type="text" [(ngModel)]="username">

Error in Console

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

What is the Main Cause of This Error?

FormsModule is missing in your module. Angular is not included by default. You must import manually.

Solution 1: Import FormsModule

in app.module.ts file


import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ]
})
export class AppModule { }

Note: When you import ngModel in the app.module.ts file, then this enables ngModel across your app.

Solution 2: For Standalone Components (Angular 14+)

If you are using a standalone component, then you import FormsModule in the imports array.


import { FormsModule } from '@angular/forms';

@Component({
  standalone: true,
  imports: [FormsModule],
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {}

Solution 3: Using ngModel Inside Feature Module

If your component is in a separate module:


@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ]
})
export class UserModule {}

Solution 4: Using ngModel in a Lazy-Loaded Module

Lazy modules do not inherit imports, so you have to re-import.


imports: [FormsModule]

Conclusion

The Can’t bind to ngModel error in Angular is generally caused by missing imports, incorrect component configuration, or misuse of template-driven forms.

By importing the necessary modules, verifying your component setup, and following Angular’s recommended practices, you can resolve this issue quickly and keep your application running smoothly.