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


In this article we will see solution for most common angular error: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

If you are new to Angular and if you are working on any form and using template driven form then you might have bind property using ngModel. And you might have encountered this error Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

When you get this error You might think that ngModel is not working in Angular but it’s something related to import module.


import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector:'app-hero',
  templateUrl: './hero.component.html',
})
    
export class HeroComponent
{
    public firstName: string = "John Smith";
}

And template file will look like this:

hero.component.html


<input type="text" [(ngmodel)]="firstName" placeholder="First Name">

When you will run the above code, you will get compile time error Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

Now we will see solution for it.

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

In Angular app, If you want to use two-way data binding for template driven form inputs, we need to import the FormsModule from @angular/core in app.module.ts.


In order to be able to use two-way data binding for form inputs you need to import the FormsModule package in your Angular module as shown in code below.

app.module.ts


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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ], 
  declarations: []
  }
)

And if you are using Reactive Form(FormBuilder class) then you will need to import ReactiveFormsModule as well as shown in above code.

I hope you find the solution for Most common Angular error Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

Thanks for Reading this article.

I hope you like this article.


Also Read:

Angular Email Validation in Reactive Form with Example

Angular Email Validation in Template-Driven Form with Example

Angular Material Grid Layout Example

Angular Material Card Example

Angular Material List Example

Top 10 VS Code extensions

Tailwind CSS Setup

Chakra UI Setup