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?

Holyhead

You need to add FormsModule to imports: [] of the module where you use ngModel. Otherwise post your code. – Rothberg

I can't thinking that all new Angular 2 & 4 developers are going to hit this exact issue (myself included). When was the last time you used Angular and didn't want to use ngModel somewhere ? I don't understand why FormsModule isn't just included by default.... – Nildanile

For what it's worth, I encountered this error in IONIC-4 ( 4.11.0 ) when working with Forms Validation. If I do nothing else except add formControlName="myControl" to any <ion-input> anywhere in the form, I get the ngModel binding error message. Alternate properties, like formControlName1="myControl" do not cause this error. – Pilsudski

Possible duplicate of Can't bind to 'ngModel' since it isn't a known property of 'input' – Displant

Answer 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

Fanciful

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

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. – Larch

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

you should not import inside component.ts – Fanciful

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

then also it should be the same – Fanciful

The same as what? – Ruben

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

@Sajeetharan.. Hello Sajeetharan .. can you please help me out with this question......#49535602 – Ricebird

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? – Dulosis

ngModal dammit – Ostler

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.. – Misappropriate

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] }) – Umont

#51529180 – Carthage

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

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

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. – Effect

"Check the syntax/spelling of [(ngModel)] in the input tag" This is exactly the mistake I made. Thank you for the edit. – Lagena

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

Genny

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

Answer 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 ]
 })

Wagonage

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. – Fargone

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

Intolerance

Answer 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();
}));

Incult

Answer 6

In app.module.ts add this:

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

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

Isoniazid

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

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

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. – Leucine

Answer 7

Add FormsModule in your NgModule imports (hence ngModel is a part of FormsModule).

Note it can be AppModule or feature module loaded lazily via lazy loading.

imports: [
   ...,
   FormsModule,
   ...
]

Outofdate

Answer 8

You should verify following things if the two way binding does not work.

In html the ngModel should be called this way. There is no dependency on other attribute of the input element

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

Make Sure FormsModule is imported into the modules file app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Make sure the component in which you are trying to use ngModel for two way binding is added in the declarations of the. Code added in the previous point #2

This is everything that you need to do to make the two way binding using ngModel work, this is validated up to angular 9

Infatuate

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

Answer 9

After spending hours on this issue found solution here

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

Upwards

No need to import ReactiveFormsModule. Only FormsModule is required. – Lambeth

Answer 10

The Answer for me was wrong spelling of ngModel. I had it written like this : ngModule while it should be ngModel.

All other attempts obviously failed to resolve the error for me.

Lucaslucca

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

Answer 11

I tried all the thing that are mentioned above, but still it is not working.

but finally I found the issue in Angular site.Try to import formModule in module.ts thats it.

Leslileslie

Answer 12

Try adding

ngModel in module level

The code is same as the above

Jenninejennings

Answer 13

Update with Angular 7.x.x, encounter the same issue in one of my modules.

If it lies in your independent module, add these extra modules:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

If it lies in your app.module.ts, add these modules:

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

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

A simple demo to prove the case.

Vulgarize

Answer 14

In my case I added the missing import, which was the ReactiveFormsModule.

Inartistic

Answer 15

If you want to use two-way data binding for form inputs you need to import theFormsModule package in your Angular module. For more info see the Angular 2 official tutorial here and the official documentation for forms

in the app.module.ts add below lines :

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

Midship

Answer 16

In my case I misspelled , I was referring as ngmodel istead of ngModel :) Hope It helps!

Expected - [(ngModel)] Actual - [(ngmodel)]

Beatty

Answer 17

import form module in app.module.ts.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

In html:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

Yesterday

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. – Yesterday

Answer 18

in angular 7, you have to import "ReactiveFormsModule".

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

I solved this issue by this import.It would help you.

Calender

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

Answer 19

first import FormsModule and then use ngModel in your component.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML Code:

<input type='text' [(ngModel)] ="usertext" />

Rehabilitate

Answer 20

If even after importing the formsmodule the problem persists, check that your Input does not have a "name" attribute with value equal to another input on page.

Medrano

Answer 21

In my case, during a lazy-loading conversion of my application I had incorrectly imported the RoutingModule instead of my ComponentModule inside app-routing.module.ts

Pressley