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'

This matters because Angular uses modules to keep applications organized. Each module explicitly declares what template features it can use. That helps Angular compile templates correctly and keeps dependencies clear.

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">
<p>Hello, {{ username }}</p>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  username = '';
}

What [(ngModel)] means

The syntax is called banana in a box:

[(ngModel)]="username"

It combines:

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

So Angular both:

• reads the value from the component
• writes changes back to the component

Feature module example

If your component is declared in a feature module, importing FormsModule only in AppModule may not be enough.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { ProfileComponent } from './profile.component';

@NgModule({
  declarations: [ProfileComponent],
  imports: [CommonModule, FormsModule]
})
export class ProfileModule {}

The key rule is: import FormsModule in the same module where the component is declared.

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 class AppModule {}

What happens step by step

1. Angular loads AppModule.
2. AppModule imports FormsModule.
3. FormsModule provides the ngModel directive.
4. Angular compiles AppComponent's template.
5. Angular sees [(ngModel)]="name" on the <input>.
6. Because FormsModule is available in this module, Angular recognizes ngModel.
7. The input displays the initial value: Ana.
8. When the user types, Angular updates name.
9. The <p>{{ name }}</p> binding updates automatically.

What happens if FormsModule is missing

1. Angular compiles the template.
2. It sees [(ngModel)].
3. It checks available directives in the current module.
4. ngModel is not available.
5. Angular throws:

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

So the problem is not the input element itself. The problem is that the forms directive was never imported into that module.

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

<label>
  <input type="checkbox" [(ngModel)]="isAdmin">
  Admin access
</label>

export class UserComponent {
  isAdmin = false;
}

These are practical because the component state stays in sync with the form controls.

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.
</p>

Example: safe defaults

export class SettingsComponent {
  displayName = '';
  receiveEmails = false;
}

In larger codebases

Developers often choose:

• ngModel for simple forms
• Reactive Forms for complex validation and dynamic forms

A common team guideline is:

• if the form is small and straightforward, use template-driven forms with ngModel
• if the form has complex validation, nested groups, or dynamic controls, use ReactiveFormsModule instead

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 FormsModule.

A common mistake is importing it only in AppModule and expecting it to work everywhere.

3. Misspelling ngModel

Broken:

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

Fix:

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

Angular template syntax is case-sensitive.

4. Using ngModel with reactive forms incorrectly

If you are using formControlName, mixing it with ngModel on the same control is usually not the right approach.

Problematic example:

<input formControlName="email" [(ngModel)]="email">

Usually, choose one form style for that control.

5. Forgetting standalone component imports in newer Angular versions

In newer Angular versions with standalone components, you import FormsModule in the component itself. Even though your original question is about Angular 4, many learners see this issue in modern Angular too.

6. Assuming every Angular directive is globally available

Angular does not automatically expose all directives. You must import the modules that provide them.

How to avoid these mistakes

• Check which module declares your component.
• Import FormsModule there.
• Verify the spelling of ngModel.
• Do not mix template-driven and reactive patterns casually.
• Restart the dev server if the setup changed and the tooling seems stuck.

Here is how ngModel fits with related Angular form concepts.

ngModel vs manual binding

With ngModel:

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

Manual equivalent:

<input [value]="name" (input)="name = $any($event.target).value">

ngModel is shorter and clearer for simple use cases.

Template-driven vs reactive forms

If your form is simple, ngModel is often enough. If your form becomes large or dynamic, reactive forms are usually better.

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

• FormsModule not imported
• imported in the wrong module
• misspelled ngModel
• mixed incorrectly with reactive forms

When to use ngModel

• small forms
• search boxes
• settings panels
• simple data entry forms

When to consider reactive forms

• complex validation
• nested form groups
• dynamic controls
• large enterprise forms

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 value binding?

ngModel handles both reading and writing automatically. [value] only sets the value unless you manually handle input events.

Do I still need this fix in newer Angular versions?

Yes, the idea is the same: Angular must have access to the forms module. In standalone components, the import location is different, but the principle is unchanged.

• 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.