Can’t bind to ngModel in Angular

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

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 Lazy Loaded Module

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

imports: [FormsModule]