Angular error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"

Question

I'm using Angular 4 and I am getting an error in the console:

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

How can I resolve this?

Solution 1

In order to use two-way data binding for form inputs you need to import the FormsModule package in your Angular module.

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

@NgModule({
    imports: [
         FormsModule      
    ]

---

EDIT

Since there are lot of duplicate questions with the same problem, I am enhancing this answer.

There are two possible reasons

• Missing FormsModule, hence Add this to your Module,

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
      imports: [
          FormsModule      
      ]
  

• Check the syntax/spelling of [(ngModel)] in the input tag

Solution 2

This is a right answer. you need to import 'FormsModule'

first in app.module.ts

**

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule  } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule ,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

** second in app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

Best regards and hope will be helpful.

Solution 3

Your ngModel is not working because it's not a part of your NgModule yet.

You have to tell the NgModule that you have authority to use ngModel throughout your app, You can do it by adding FormsModule into your app.module.ts -> imports-> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

Solution 4

All the above mentioned solutions to the problem are correct. But if you are using lazy loading, FormsModule needs to be imported in the child module which has forms in it. Adding it in app.module.ts won't help.

Solution 5

I ran into this error when testing my Angular 6 App with Karma/Jasmine. I had already imported FormsModule in my top-level module. But when I added a new component that used [(ngModel)] my tests began failing. In this case, I needed to import FormsModule in my TestBed TestingModule.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));

View more solutions

Comments

[Govind]

What is the relation between ngModel and FormsModule? However this is not working for me.

[Günter Zöchbauer]

What additional value does this answer add to the existing answers?

[ssmsnet]

doesnt add any value to the answer and the format of the code is wrong. Confusing for begineer.

[Bob]

FormsModule provides additional directives on form's elements, including input, select, etc. That's why it's required. Don't forget to import FormsModule in the same module which declares your components containing form element bindings.

[Mike Warren]

What do we do if we're using this in a component ts file?

[Sajeetharan]

you should not import inside component.ts

[Clijsters]

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

[CJBrew]

@Sajeetharan what if I have a template in my Component that uses ng-model in some form element?

[Sajeetharan]

then also it should be the same

[CJBrew]

The same as what?

[Sajeetharan]

the answer above, i guess you are refering [(ngModel)] right? or ng-model?

[Heena]

@Sajeetharan.. Hello Sajeetharan .. can you please help me out with this question......stackoverflow.com/questions/49535102/…

[phougatv]

What if I have 2+ child.module.ts, should I import FormModule separately in each child module or there is a better way to do it?

[Worthy7]

ngModal dammit

[Eric Soyke]

After running into this in two earlier projects you'd think I'd remember this by now. One of those things you do once per project and forget all about..

[RSB]

I am facing similar issues. Here is my code: File: server.component.ts <p> <input type="text" class="form-control" [(ngModel)]="updatedServerName"> </p> File:app.module.ts import { FormsModule, ReactiveFormsModule } from '@angular/forms' NgModule({ declarations: [ AppComponent, ServerComponent, ServersComponent ], imports: [ FormsModule, BrowserModule ], providers: [], bootstrap: [AppComponent] })

[its me]

stackoverflow.com/questions/51528680/…

[Brahmmeswara Rao Palepu]

I used form in html, and imported forms module in app.madule.ts like- import { FormsModule} from '@angular/forms', and add that FormsModule in imports.

[Sharif Yazdian]

it's 2019 and we are at Angular 8 and still have these problems... when do they want to fix it?!

[Konrad Viltersten]

Is the second step, altering app.component.ts necessary?

[Rahul Sonwanshi]

Ya, This happened to me as well... Model != Module Why does that not go in my brain!

[TheCoderGuy]

I do have the same problem, I have the Angular v9 it happens to me. Your answer doesn't work for me :(

[prageeth]

In my case, I had not added the HomeComponent. Thanks.

[Hassan Raza]

Importing component in the module.ts file solved my problem. I forgot to add component registration. P.s: Importing FormModule in module.ts is must.

[MichaelHuelsen]

Well, it depends: if your Angular app consists of more than just the root app module, you might want to import the FormsModule in selected modules only.

[fredtma]

for some strange reason it only worked with ReactiveFormsModule & without FormsModule (angular 13)

[Suprabhat Kumar]

No need to import ReactiveFormsModule. Only FormsModule is required.