How to Fix "Can't bind to 'ngModel'" in Angular

By the end of this page, you will understand why Angular does not recognize ngModel, how Angular modules control template features, and how to fix the error by importing FormsModule in the correct module. You will also learn common mistakes, how this differs from reactive forms, and how ngModel is used in real Angular applications.

ngModel is part of Angular's forms system. It enables two-way data binding between an input element and a component property.

For example:

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

This means:

• the input shows the value of username
• when the user types, username updates automatically

Angular does not make every directive available everywhere by default. Features such as ngModel, ngIf, and ngFor are provided by Angular modules.

ngModel belongs to FormsModule, which comes from @angular/forms.

If the Angular module that declares your component does not import FormsModule, Angular cannot understand [(ngModel)] in that component's template, so it throws this error:

Can't bind to 'ngModel' since it isn't a known property of 'input'

Think of Angular modules like a toolbox for each part of your app.

• Your component template is a worker.
• ngModel is a tool.
• FormsModule is the toolbox that contains that tool.

If the worker does not have that toolbox, it cannot use the tool.

So when Angular sees:

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

it asks: "Does this module have the forms toolbox?"

• Yes → ngModel works.
• No → Angular says it does not know that property.

The important idea is: the component only gets access to directives imported by its Angular module.

The most common fix is to import FormsModule into the Angular module that declares the component using ngModel.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

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

Then your component template can use ngModel:

<input [(ngModel)]="username" placeholder="Enter your name">
Hello, {{ username }}

Consider this example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input [(ngModel)]="name">
    <p>{{ name }}</p>
  `
})
export class AppComponent {
  name = 'Ana';
}

And this module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent]
})
export   {}

ngModel is commonly used in simple and medium-sized Angular forms.

Common use cases

• Login forms
  • bind email and password fields to component properties
• Search boxes
  • update a query string as the user types
• Settings pages
  • bind checkboxes, dropdowns, and text fields to user preferences
• Admin dashboards
  • edit records in a quick form
• Filter UIs
  • bind selected values for category, sort order, or date range

Example: search input

<input [(ngModel)]="searchTerm" placeholder="Search products">
<p>Searching for: {{ searchTerm }}</p>

export class ProductComponent {
  searchTerm = '';
}

Example: checkbox

<>
  
  Admin access

In real Angular projects, developers use ngModel mostly in template-driven forms and simple input binding scenarios.

Common patterns

• Quick forms for small features
  • profile edit forms
  • search fields
  • filter panels
• Default values from APIs
  • load data into component properties, then bind with ngModel
• Validation in templates
  • combine ngModel with required, minlength, and template references
• Guarding incomplete values
  • initialize properties to safe defaults like '', false, or 0

Example: simple validation

<input [(ngModel)]="email" #emailCtrl="ngModel" required>

<p *ngIf="emailCtrl.invalid && emailCtrl.touched">
  Email is required.

Here are the most common reasons this error keeps happening.

1. Forgetting to import FormsModule

Broken:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

Fix:

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

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

2. Importing FormsModule in the wrong module

If UserFormComponent is declared in UserModule, then UserModule must import .

Here is how ngModel fits with related Angular form concepts.

ngModel vs manual binding

Quick fix

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

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

Basic usage

<input [(ngModel)]="name">

name = '';

Rule to remember

• ngModel comes from FormsModule
• import FormsModule in the module that declares the component using ngModel

Two-way binding meaning

[(ngModel)]="name"

Equivalent idea:

[ngModel]="name"
(ngModelChange)="name = $event"

Common causes of the error

Why does Angular say ngModel is not a known property?

Because the module containing your component does not have access to FormsModule, which provides the ngModel directive.

Which module do I need to import for ngModel?

Import FormsModule from @angular/forms.

Why does importing FormsModule in AppModule not always fix it?

Because the component might be declared in a feature module. That feature module must also import FormsModule.

Can I use ngModel with reactive forms?

You should generally avoid mixing ngModel with formControlName on the same input unless you have a very specific reason and understand the trade-offs.

Is ngModel only for text inputs?

No. It also works with checkboxes, selects, textareas, and other compatible form controls.

What is the difference between ngModel and binding?

• FormsModule - This module provides ngModel and other template-driven forms features.
• ReactiveFormsModule - Used for reactive forms as an alternative to ngModel.
• Two-way data binding - [(ngModel)] is Angular's common two-way binding syntax.
• Angular modules - Understanding module scope explains why directives are or are not available.
• Template-driven forms - ngModel is a core part of this form style.
• Directives - ngModel, ngIf, and ngFor are examples of Angular directives.
• formControlName - A related binding used in reactive forms instead of ngModel.