TypeScript- s Angular Framework Error - There is no directive with exportAs set to ngForm

Question

I keep getting this error while using TypeScript s Angular2-forms framework      There is no directive with  exportAs  set to  ngForm    Here s my code  project dependencies       dependencies           angular common    2 0 0-rc 6         angular compiler    2 0 0-rc 6         angular core    2 0 0-rc 6         angular forms    2 0 0-rc 6         angular http    2 0 0-rc 6         angular platform-browser    2 0 0-rc 6         angular platform-browser-dynamic    2 0 0-rc 6         angular router    3 0 0-rc 2        ng2-bootstrap     1 1 1        reflect-metadata     0 1 8        core-js     2 4 0        es6-module-loader     0 17 8        rxjs    5 0 0-beta 11        systemjs    0 19 27        zone js    0 6 17        jquery    3 0 0         And this is the Login Template     lt form  loginForm  ngForm   ng-submit   authenticate loginForm value   gt   lt  form gt       and  the Login Component    import   Component   from   angular core   import  Http  Headers   from   angular http    Component       moduleId  module id      selector   login-cmp       templateUrl   login component html     export class LoginComponent     constructor  http  Http        this  http    http        authenticate data                    I have this Error    zone js 1474211973422 484 Unhandled Promise rejection  Template parse errors      There is no directive with  exportAs  set to  ngForm                  lt form  ERROR - gt   loginForm  ngForm    ngsubmit   authenticate loginForm value   gt

User · Answer

Just in case someone else is blind like me  form FTW  Make sure to use  lt form gt  tag   wont work    lt div  ngSubmit   search     f  ngForm  class  input-group  gt       lt span class  input-group-btn  gt         lt button class  btn btn-secondary  type  submit  gt Go  lt  button gt       lt  span gt       lt input type  text  ngModel class  form-control  name  search  placeholder  Search     aria-label  Search     gt   lt  div gt    works like charm       lt form  ngSubmit   search     f  ngForm  class  input-group  gt               lt span class  input-group-btn  gt                 lt button class  btn btn-secondary  type  submit  gt Go  lt  button gt               lt  span gt               lt input type  text  ngModel class  form-control  name  search  placeholder  Search     aria-label  Search     gt   lt  form gt

User · Answer

This   lt div  myForm  ngForm  gt  lt  div gt    Also causes the error and can be fixed by including the ngForm directive    lt div ngForm  myForm  ngForm  gt  lt  div gt

User · Answer

In addition to import the form module in login component ts file you need to import NgForm also   import   NgForm   from   angular forms     This resolved my issue

User · Answer

In case a name is assigned like this    editForm  testForm        the exportAs has to be defined in the component decorator    selector   test-form   templateUrl     test-form component html   styleUrls      test-form component scss    exportAs   testForm

User · Answer

In my case  I forgot to add my component in the Declaration array of app module ts  and voila  the issue was fixed

User · Answer

import   FormsModule ReactiveFormsModule  from  angular forms    imports       BrowserModule withServerTransition   appId   ng-cli-universal          HttpClientModule      FormsModule      ReactiveFormsModule  This one in particular            in app module ts to permanently solve errors like  cannot bind  formGroup  or no directive with export as

User · Answer

import   FormsModule     from   angular forms     NgModule     imports                 BrowserModule                FormsModule         lt ----------make sure you have added this

User · Answer

import   FormsModule     from   angular forms     NgModule     imports   FormsModule

User · Answer

Another item check  Make sure you component is added to the declarations array of  NgModule in app module ts  NgModule   declarations        YourComponent      When running the ng generate component command  it does not automatilly add it to app module

User · Answer

This error also occurs if you are trying to write a unit test case in angular using jasmine   The basic concept of this error is to import FormsModule  Thus  in the file for unit tests  we add imports Section and place FormsModule in that file under      TestBed configureTestingModule     For eg       TestBed configureTestingModule           declarations    XYZComponent              imports   FormsModule            compileComponents

User · Answer

You have to import FormsModule into not only the root AppModule  but also into every subModule that uses any angular forms directives      SubModule A  import   CommonModule   from   angular common   import   FormsModule     from   angular forms     NgModule     imports        CommonModule      FormsModule         lt ----------make sure you have added this

User · Answer

You should terminate app with ctrl c and re run it with ng serve  if you  did not include FormsModule into you app module file imports array  and then added it later  angular does not know it  it does not re-scan modules  you should restart app so angular could see that new module is included  after what it will included all features of template drive approach

User · Answer

You must import the FormsModule and then place it in the section of imports   import   FormsModule   from   angular forms

User · Answer

I faced this issue  but none of the answers here worked for me  I googled and found that FormsModule not shared with Feature Modules  So If your form is in a featured module  then you have to import and add the FromsModule there   Please ref  https   github com angular angular issues 11365

User · Answer

Simple if you have not import module then import and declare import   FormsModule   from   angular forms   and if you did then you just need to remove    formControlName  whatever     from input fields   module ts  import  FormsModule  ReactiveFormsModule  from   angular forms    imports        BrowserModule      FormsModule       ReactiveFormsModule

User · Answer

In my case I had to remove the ngNoForm attribute from my  lt form gt  tag      If you you want to import FormsModule in your application but want to skip a specific form  you can use the ngNoForm directive which will prevent ngForm from being added to the form   Reference  https   www techiediaries com angular-ngform-ngnoform-template-reference-variable

User · Answer

Just import the correct module    FormsModule    import   FormsModule   from   angular forms      NgModule     imports        BrowserModule      FormsModule    lt ---

User · Answer

I ve come to this same question over  amp  over again  also due to same reason  So let me answer this by saying what wrong I was doing  Might be helpful for someone   I was creating component via angular-cli by command     ng g c components something something   What it did  was created the component as I wanted   Also  While creating the component  it added the component in the App Module s declarations array    If this is the case  please remove it  And Voila  It might work

User · Answer

I just moved routing modules i e  say ARoutingModule above FormsModule and ReactiveFormsModule and after CommonModule in imports array of modules

User · Answer

check whether you import FormsModule  There s no ngControl in the new forms angular 2 release version  you have to change your template  to  as an example   lt div class  row  gt       lt div class  form-group col-sm-7 col-md-5  gt           lt label for  name  gt Name lt  label gt           lt input type  text  class  form-control  required                  ngModel    user name                 name  name   name  ngModel  gt           lt div  hidden   name valid    name pristine  class  alert alert-danger  gt              Name is required          lt  div gt       lt  div gt   lt  div gt

User · Answer

just giving this as a reference  becos this worked for newer angular versions There is no directive with    exportAs    set to    ngForm

User · Answer

Two Things you have to care     If you using the sub module  you have to import the FormModule in that sub module             imports  CommonModule HttpModule FormsModule     you have to exports the FormModule  in the module        exports  FormsModule       so together it looks like          imports  CommonModule HttpModule FormsModule            exports  FormsModule   in Top u have to import the FormsModule  import  FormsModule  from   angular forms       if you are using only the app module ts then       no need to export   only import required

User · Answer

I know this is a Old post  but i would like to share my solution  I have added  ReactiveFormsModule  in imports   array to resolve this error   Error  There is no directive with  exportAs  set to  ngForm      Fix    module ts  import  FormsModule  ReactiveFormsModule  from   angular forms    imports        BrowserModule      FormsModule        ReactiveFormsModule

[angular] TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"

Examples related to angular

Examples related to typescript

Examples related to forms

Examples related to angular2-forms