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

User · Answer

import   FormsModule   from   angular forms       lt  lt  lt  lt  import it here  BrowserModule  FormsModule    lt  lt  lt  lt  and here  So simply looks for app module ts or another module file and make sure you have FormsModule imported in

User · Answer

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

User · Answer

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

User · Answer

first import FormsModule and then use ngModel in your component ts  import   FormsModule   from   angular forms     NgModule    imports                 FormsModule                  HTML Code    lt input type  text    ngModel     usertext    gt

User · Answer

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

User · Answer

In app module ts add this   import   FormsModule  ReactiveFormsModule   from   angular forms     NgModule       declarations   AppComponent       imports   FormsModule

User · Answer

This is a right answer   you need to import FormsMoudle   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        gt      beforeEach async      gt        TestBed configureTestingModule         imports            RouterTestingModule          FormsModule                declarations            AppComponent                 compileComponents             Best regards and hope will be helpfull

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Try adding      ngModel in module level   The code is same as the above

User · Answer

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

User · Answer

In my case I misspelled   I was referring as ngmodel istead of ngModel    Hope It helps   Expected  -   ngModel   Actual    -   ngmodel

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt input type  text  name  last name    ngModel    last name   ngModelOptions    standalone  true   class  form-control  gt

User · Answer

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      gt      TestBed configureTestingModule       imports          FormsModule            declarations          RegisterComponent               compileComponents

User · Answer

After spending hours on this issue found solution here import   FormsModule  ReactiveFormsModule   from   angular forms         NgModule       imports             FormsModule           ReactiveFormsModule

User · Answer

in angular 7  you have to import  quot ReactiveFormsModule quot   import  FormsModule  ReactiveFormsModule  from   angular forms   I solved this issue by this import It would help you

User · Answer

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    lt input   ngModel    inputText  gt      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

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

Examples related to angular

Examples related to typescript

Examples related to angular-ngmodel

Examples related to angular-forms