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

Question

I ve got the following error when launching my Angular app  even if the component is not displayed   I have to comment out the  lt input gt  so that my app works   zone js 461 Unhandled Promise rejection  Template parse errors  Can t bind to  ngModel  since it isn t a known property of  input          lt div gt         lt label gt Created  lt  label gt         lt input  type  text   ERROR - gt    ngModel    test  placeholder  foo    gt      lt  div gt   lt  div gt     InterventionDetails 4 28   Zone   lt root gt    Task  Promise then   Value     I m looking at the Hero plunker  but I don t see any difference from my code   Here is the component file   import   Component  EventEmitter  Input  OnInit  Output   from   angular core   import   Intervention   from        model intervention     Component      selector   intervention-details      templateUrl   app intervention details intervention details html      styleUrls    app intervention details intervention details css       export class InterventionDetails       Input   intervention  Intervention      public test   string    toto

User · Answer

Import FormModule in file app module import   FormsModule   from   angular forms          NgModule   imports          FormsModule

User · Answer

Sometimes you get this error when you try to use a component from a module  which is not shared  in a different module   For example  you have 2 modules with module1 componentA component ts and module2 componentC component ts and you try to use the selector from module1 componentA component ts in a template inside module2  e g   lt module1-componentA  someInputVariableInModule1   variableFromHTTPRequestInModule2  gt     it will throw the error that the someInputVariableInModule1 is not available inside module1 componentA component ts - even though you have the  Input   someInputVariableInModule1 in the module1 componentA   If this happens  you want to share the module1 componentA to be accessible in other modules  So if you share the module1 componentA inside a sharedModule  the module1 componentA will be usable inside other modules  outside from module1   and every module importing the sharedModule will be able to access the selector in their templates injecting the  Input   declared variable

User · Answer

If you need to use   ngModel   first  you need to import FormsModule in app module ts and then add in a list of imports  Something like this  File app module ts  import import  FormsModule  from  quot  angular forms quot   add in imports imports    BrowserModule  FormsModule     File app component ts  Example   lt input type  quot text quot    ngModel    quot name quot   gt  and then  lt h1 gt your name is    name    lt  h1 gt

User · Answer

Sometimes  even though we are already imported BrowserModule  FormsModule and other related modules  we still may get the same error  Then I realized that we need to import them in order  which is missed in my case  So the order should be like  BrowserModule  FormsModule  and ReactiveFormsModule  As per my understanding  feature modules should follow the basic modules of Angular  import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms   import   AppComponent   from    app component     NgModule     imports        BrowserModule      FormsModule      ReactiveFormsModule        providers        declarations        AppComponent        bootstrap   AppComponent     export class AppModule

User · Answer

Yes  that s it  In the app module ts file  I just added  import   FormsModule   from   angular forms            NgModule     imports                  FormsModule

User · Answer

I am using Angular 9 and I have a   lt form  tag with the  formGroup  property  I also had an   lt input  tag specifying a button  which caused the error on the   ngModel   part  I resolved the error by just removing only that  ngModel  part

User · Answer

Import FormsModule in you app module  It would let your application run well  import   NgModule        from   angular core   import   BrowserModule   from   angular platform-browser   import  ContactListCopmponent  from    contacts contact-list component   import   FormsModule     from   angular forms    import   AppComponent    from    app component     NgModule     imports        BrowserModule      FormsModule        declarations        AppComponent ContactListCopmponent        bootstrap    AppComponent      export class AppModule

User · Answer

In the module you are willing to use ngModel you have to import FormsModule  import   FormsModule   from   angular forms     NgModule     imports        FormsModule           export class AbcModule

User · Answer

If someone is still getting errors after applying the accepted solution  it could be possibly because you have a separate module file for the component in which you want to use the ngModel property in input tag  In that case  apply the accepted solution in the component s module ts file as well

User · Answer

For my scenario  I had to import both  CommonModule  and  FormsModule  to my module  import   NgModule   from   angular core   import   CommonModule   from   angular common    import   FormsModule   from   angular forms     import   MyComponent   from    mycomponent    NgModule       imports            CommonModule          FormsModule            declarations            MyComponent             export class MyModule

User · Answer

This error will happen too even if the FormsModule is imported directly or indirectly  from a shared module for example  in the feature module  if the imported component is not declared on declarations   I followed Deborah Kurata s Angular Routing course  While I added the imported component ProductEditInfoComponent on Angular Route s component property  I forgot to add ProductEditInfoComponent on declarations property  Adding the ProductEditInfoComponent on the declarations property would solve the NG8002  Can t bind to  ngModel  since it isn t a known property of  input   problem

User · Answer

Import the FormsModule in those modules where you want to use the   ngModel

User · Answer

Note  Remember that the ngModel directive is defined as a part of Angular FormsModule and you need to include FormsModule in the imports        section of the Angular module metadata  in which you want to use it

User · Answer

Though the answer solves the issue  I would like to provide a little more information on this topic as I have also undergone this issue when I started to work on Angular projects  A beginner should understand that there are two main types of forms  They are Reactive forms and Template-driven forms  From Angular 2 onward  it is recommended to use Reactive forms for any kind of forms  Reactive forms are more robust  they re more scalable  reusable  and testable  If forms are a key part of your application  or you re already using reactive patterns for building your application  use reactive forms  Template-driven forms are useful for adding a simple form to an application  such as an email list signup form  They re easy to add to an application  but they don t scale as well as reactive forms  If you have very basic form requirements and logic that can be managed solely in the template  use template-driven forms  Refer Angular documents for more details  Coming to the question    ngModel    quot     quot  is basically a binding syntax  In order to use this in your component HTML page  you should import FormsModule in your NgModule  where your component is present   Now   ngModel   is used for a simple two-way binding or this is used in your form for any input HTML element  On the other hand  to use reactive forms  import ReactiveFormsModule from the  angular forms package and add it to your NgModule s imports array  For example  if my component HTML content does not have   ngmodel   in any HTML element  then I don t need to import FormsModule  In my below example  I have completely used Reactive Forms and hence I don t need to use FormsModule in my NgModule  Create GroupsModule  import   NgModule   from   angular core   import   CommonModule   from   angular common   import   GroupsRoutingModule  routedAccountComponents   from    groups-routing module   import   ReactiveFormsModule   from   angular forms   import   SharedModule   from     shared shared module   import   ModalModule   from  ngx-bootstrap    NgModule       declarations            routedAccountComponents            imports            CommonModule          ReactiveFormsModule          GroupsRoutingModule          SharedModule          ModalModule forRoot            export class GroupsModule      Create the routing module  separated to main the code and for readability    import   NgModule   from   angular core   import   Routes  RouterModule   from   angular router   import   GroupsComponent   from    all index component   import   CreateGroupComponent   from    create index component    const routes  Routes             path          redirectTo   groups       pathMatch   full               path   groups       component  GroupsComponent           NgModule     imports   RouterModule forChild routes      exports   RouterModule     export class GroupsRoutingModule       export const routedAccountComponents       GroupsComponent    CreateGroupComponent      CreateGroupComponent html code  lt form  formGroup   quot form quot   ngSubmit   quot onSubmit   quot  gt           lt label for  quot name quot  gt Group Name lt  label gt           lt div class  quot form-group quot  gt               lt div class  quot form-line quot  gt                   lt input type  quot text quot  formControlName  quot name quot  class  quot form-control quot  gt               lt  div gt           lt  div gt       lt  form gt    CreateGroupComponent ts file  import   Component  OnInit  Output  EventEmitter   from   angular core   import   DialogResult   from  src app shared modal   import   FormGroup  FormControl  AbstractControl   from   angular forms   import   Subject   from  rxjs   import   ToastrService   from  ngx-toastr   import   validateAllFormFields   from  src app services validateAllFormFields   import   HttpErrorResponse   from   angular common http   import   modelStateFormMapper   from  src app services shared modelStateFormMapper   import   GroupsService   from     groups service   import   CreateGroup   from     model create-group model     Component       selector   app-create-group       templateUrl     index component html       providers   LoadingService      export class CreateGroupComponent implements OnInit       public form  FormGroup      public errors  string             private destroy  Subject lt void gt    new Subject lt void gt          constructor          private groupService  GroupsService          private toastr  ToastrService                private buildForm    FormGroup           return new FormGroup               name  new FormControl      Validators maxLength 254                           private getModel    CreateGroup           const formValue   this form value          return  lt CreateGroup gt               name  formValue name                       public control name  string   AbstractControl           return this form get name              public ngOnInit             this form   this buildForm                public onSubmit    void             if  this form valid                    this onSubmit                   do what you need to do                      I hope this helps developers to understand as to why and when you need to use FormsModule

User · Answer

This is for the folks who use plain JavaScript instead of Type Script  In addition to referencing the forms script file on top of the page like below   lt script src  quot node modules  angular forms bundles forms umd js quot  gt  lt  script gt   You should also tell the the module loader to load the ng forms FormsModule  After making the changes my imports property of NgModule method looked like below  imports   ng platformBrowser BrowserModule  ng forms FormsModule

User · Answer

For using   ngModel   in Angular 2  4  amp  5   you need to import FormsModule from Angular form    Also  it is in this path under forms in the Angular repository on GitHub   angular   packages   forms   src   directives   ng model ts  Probably this is not a very pleasurable for the AngularJS developers as you could use ng-model everywhere anytime before  but as Angular tries to separate modules to use whatever you d like you to want to use at the time  ngModel is in FormsModule now  Also  if you are using ReactiveFormsModule it needs to import it too  So simply look for app module ts and make sure you have FormsModule imported in    import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms        lt  lt  lt  lt  import it here import   AppComponent   from    app component     NgModule     declarations        AppComponent        imports        BrowserModule  FormsModule     lt  lt  lt  lt  And here        providers        bootstrap   AppComponent      export class AppModule      Also  these are the current starting comments for Angular4 ngModel in FormsModule          ngModel  forces an additional change detection run when its inputs change     E g              lt div gt   myModel valid   lt  div gt      lt input   ngModel    quot myValue quot   myModel  quot ngModel quot  gt            I e   ngModel  can export itself on the element and then be used in the template     Normally  this would result in expressions before the  input  that use the exported directive    to have and old value as they have been    dirty checked before  As this is a very common case for  ngModel   we added this second change    detection run        Notes     - this is just one extra run no matter how many  ngModel  have been changed     - this is a general problem when using  exportAs  for directives       If you d like to use your input  not in a form  you can use it with ngModelOptions and make standalone true     ngModelOptions   quot  standalone  true  quot   For more information  look at ng model in the Angular section here

User · Answer

Assuming you have created a new NgModule  say AuthModule dedicated to handling your authentication needs  make sure to import FormsModule in that AuthModule too  If you ll be using the FormsModule only in the AuthModule then you wouldn t need to import the FormModule in the default AppModule  So something like this in the AuthModule  import   NgModule        from   angular core   import   FormsModule   from   angular forms    import   authRouting   from    auth routing   import   LoginComponent  SignupComponent   from    auth component     NgModule     imports             authRouting      FormsModule         declarations        SignupComponent      LoginComponent        export class AuthModule      Then forget about importing in AppModule if you don t use the FormsModule anywhere else

User · Answer

I was getting the same error when running my Angular tests because FormsModule was not added in the specification file  We need to add it in all specification files whereas for the application to run successfully we will add at one place in the app module ts file

User · Answer

The YouTube video  quot Angular error can t bind to  ngModel  since it isn t a known property of input quot  explains how to solve this practically  Below goes the textual explanation of the same   Angular error    Can t bind to  ngModel  since it isn t a known property of  input      A simple translation of the above error message is that the  quot ngModel quot  directive is not understood and the necessary Angular modules needs to be loaded so that the syntax works  For  quot ngModel quot  directive to work inside HTML we need to import  quot FormModules quot  from  quot  Angular forms quot  Below is one more similar kind of error  but related to  quot FormsGroup quot   In the below case we should load ReactiveFormsModule   Template parse errors Can t bind to  formGroup  since it isn t a known property of  form    A small tip when you get an error such as above  you can hunt for the  quot  Error-- gt   quot  text  and the arrow points towards the directive which is not understood by Angular

User · Answer

In ngModule you need to import FormsModule  because ngModel is coming from FormsModule  Please modify your app module ts like the below code I have shared  import   FormsModule  ReactiveFormsModule   from   angular forms   import   BrowserAnimationsModule   from   angular platform-browser animations     NgModule       declarations             AppComponent           HomeComponent            imports             BrowserModule           AppRoutingModule           FormsModule            bootstrap   AppComponent     export class AppModule

User · Answer

I upgraded from RC1 to RC5 and received this error    I completed my migration  introducing a new app module ts file  changing package json to include new versions and missing modules  and finally changing my main ts to boot accordingly  based on the Angular2 quick start example     I did an npm update and then an npm outdated to confirm the versions installed were correct  still no luck   I ended up completely wiping the node modules folder and reinstalling with npm install - Voila  Problem solved

User · Answer

Simple solution  In file app module ts - Example 1 import  FormsModule  from  quot  angular forms quot      Add in imports  imports     BrowserModule   FormsModule      Example 2 If you want to use   ngModel   then you have to import  FormsModule in app module ts  import   FormsModule    from  quot  angular forms quot    NgModule     declarations        AppComponent  videoComponent  tagDirective         imports        BrowserModule   FormsModule         providers   ApiServices     bootstrap   AppComponent     export class AppModule

User · Answer

ngModel should be imported from  angular forms because it is the part of FormsModule  So I advice you to change your app module ts in something like this  import   FormsModule   from   angular forms            NgModule     imports                  FormsModule

User · Answer

import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms   import   AppComponent   from    app component     NgModule     declarations        AppComponent        imports        BrowserModule      FormsModule             providers        bootstrap   AppComponent     export class AppModule

User · Answer

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  For more information  see the Angular 2 official tutorial here and the official documentation for forms

User · Answer

ngModel is coming from FormsModule  There are some cases when you can receive this kind of error   You didn t import the FormsModule into the import array of modules where your component is declared - the component in which the ngModel is used  You have import the FormsModule into one module which is inherited of another module  In this case you have two options    let the FormsModule be imported into the import array from both modules module1 and module2  As the rule   Importing a module does not provide access to its imported modules   Imports are not inherited    declare the FormsModule into the import and export arrays in module1 to be able to see it in model2 also      In some version I faced this problem  You have imported the FormsModule correctly  but the problem is on the input HTML tag  You must add the name tag attribute for the input  and the object bound name in   ngModel   must be the same as the name into the name attribute

User · Answer

You need to import the FormsModule  Open app module ts  and add line  import   FormsModule   from   angular forms     and   NgModule   imports       FormsModule

User · Answer

I faced the same problem and the reason was that I was using ngModel in my MenuComponent  I imported my MenuComponent in app module ts  but I forgot to declare it   Declaring the MenuComponent solved my issue  I e   as shown in the below image

User · Answer

There are two steps you need to follow to get rid of this error   import FormsModule in your app module Pass it as value of imports in  NgModule decorator  Basically  file app module ts should look like below      import   NgModule        from   angular core       import   BrowserModule   from   angular platform-browser       import   FormsModule     from   angular forms       import   AppComponent    from    app component       import  AppChildComponent  from    appchild component        NgModule         imports         BrowserModule FormsModule          declarations    AppComponent  AppChildComponent          bootstrap       AppComponent              export class AppModule

User · Answer

I am using Angular 7  I have to import ReactiveFormsModule  because I am using the FormBuilder class to create a reactive form  import     FormsModule    ReactiveFormsModule   from   angular forms     NgModule     imports        CommonModule      FormsModule      ReactiveFormsModule      declarations

User · Answer

If you are still getting the error after importing FormsModule correctly then check in your terminal or  windows console  because your project is not compiling  because of another error that could be anything  and your solution has not been reflected in your browser  In my case  my console had the following unrelated error   Property  retrieveGithubUser  does not exist on type  ApiService

User · Answer

Recently I found that mistake happened not only in case when you forgot to import FormsModule in your module  In my case problem was in this code   lt input type  quot text quot  class  quot form-control quot  id  quot firstName quot                     formControlName  quot firstName quot  placeholder  quot Enter First Name quot                     value   user firstName     ngModel    quot user firstName quot  gt   I fix it with change formControlName - gt  name  lt input type  quot text quot  class  quot form-control quot  id  quot firstName quot                     name  quot firstName quot  placeholder  quot Enter First Name quot                     value   user firstName     ngModel    quot user firstName quot  gt

User · Answer

x000D   x000D  import   FormsModule   from   angular forms     NgModule     imports         FormsModule          x000D   x000D   x000D

User · Answer

I know this question is about Angular 2  but I am on Angular 4 and none of these answers helped  In Angular 4 the syntax needs to be   ngModel

User · Answer

I m using Angular 5  In my case  I needed to import ReactiveFormsModule too  File app module ts  or anymodule module ts   import   FormsModule  ReactiveFormsModule   from   angular forms     NgModule     imports        CommonModule      FormsModule      ReactiveFormsModule

User · Answer

For any version from Angular 2  you need to import FormsModule in your app module ts file and it will fix the issue

User · Answer

For me the issue was  I forgot to declare the component in the declarations array of the module   NgModule    declarations   yourcomponentName

User · Answer

When I first did the tutorial  main ts looked slightly different from what it is now  It looks very similar  but note the differences  the top one is correct    Correct   import   platformBrowserDynamic   from   angular platform-browser-dynamic   import   AppModule   from    app module    platformBrowserDynamic   bootstrapModule AppModule     Old tutorial code   import   bootstrap      from   angular platform-browser-dynamic   import   AppComponent   from    app component   bootstrap AppComponent

User · Answer

ngModel is the part of FormsModule  And it should be imported from  angular forms to work with ngModel  Please change the app module ts as follow  import   FormsModule   from   angular forms            NgModule     imports                  FormsModule

User · Answer

You need to import FormsModule in your root module if this component is in the root i e  app module ts  Kindly open app module ts  Import FormsModule from  angular forms  Ex   import   FormsModule   from   angular forms     and   NgModule   imports       FormsModule

User · Answer

You need to import the FormsModule  Open app module ts and add the lines import   FormsModule   from   angular forms    and  NgModule       imports           FormsModule

User · Answer

Main reason of this error is you forget to import FormsModule in your app module ts  But sometimes in big projects you may forget add your component in its module and confront this error

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

Import FormModule in file app.module

Examples related to javascript

Examples related to angular

Examples related to typescript

Examples related to input