Angular2 Error There is no directive with exportAs set to ngForm

Question

i m on the RC4 and i m getting the error There is no directive with  exportAs  set to  ngForm  because of my template     lt div class  form-group  gt           lt label for  actionType  gt Action Type lt  label gt           lt select             ngControl  actionType             gt    actionType  ngForm               id  actionType               class  form-control               required gt               lt option value    gt  lt  option gt               lt option  ngFor  let actionType of actionTypes  value     actionType label     gt                     actionType label                 lt  option gt           lt  select gt        lt  div gt    the boot ts    import  disableDeprecatedForms  provideForms  from   angular forms      import  bootstrap  from   angular platform-browser-dynamic    import  HTTP PROVIDERS  Http  from   angular http    import  provideRouter  from   angular router    import  APP ROUTER PROVIDER  from    routes    import  AppComponent  from    app component    bootstrap AppComponent    disableDeprecatedForms    provideForms    APP ROUTER PROVIDER  HTTP PROVIDERS          so here is my DropdownList     lt fieldset ngControlGroup  linkedProcess   gt                        lt div ngControlGroup  Process   gt                            lt label gt Linked Process lt  label gt                             lt div class  form-group  gt                  lt select              ngModel             name  label                label  ngModel               id  label               class  form-control  required              change   reloadProcesse list value                 list gt               lt option value    gt  lt  option gt               lt  -- lt option value    ActionFormComponent getFromString  GET       gt  lt  option gt -- gt                                lt option  ngFor  let processus of linkedProcess  processList  list  let i   index               value     processus i  Process label    gt                    processus Process label                lt  option gt           lt  select gt            lt  div gt        lt  div gt      my component ts    i was representing it in the old forms like this      categoryControlGroups ControlGroup              categories ControlArray   new ControlArray this categoryControlGroups     and now i m doing this     categoryControlGroups FormGroup              categories FormArray   new FormArray this categoryControlGroups     you think it s the cause of the prob

User · Answer

The correct way of use forms now in Angular2 is:

<form  (ngSubmit)="onSubmit()">

        <label>Username:</label>
        <input type="text" class="form-control"   [(ngModel)]="user.username" name="username" #username="ngModel" required />

        <label>Contraseña:</label>
        <input type="password" class="form-control"  [(ngModel)]="user.password" name="password" #password="ngModel" required />


    <input type="submit" value="Entrar" class="btn btn-primary"/>

</form>

The old way doesn't works anymore

User · Answer

In my case I had to add FormsModule and ReactiveFormsModule to the shared module ts too     thanks to  Undrium for the code example     import   NgModule                                   from   angular core   import   CommonModule                               from   angular common   import   FormsModule  ReactiveFormsModule           from   angular forms     NgModule     imports             CommonModule      ReactiveFormsModule        declarations        exports        CommonModule      FormsModule      ReactiveFormsModule        export class SharedModule

User · Answer

Since 2 0 0 rc6   forms  deprecated provideForms   and disableDeprecatedForms   functions have been removed  Please import the FormsModule or the ReactiveFormsModule from  angular forms instead   In short   If you use template-driven forms  add FormsModule to your  NgModule  If you use model-driven forms  add ReactiveFormsModule to your  NgModule   So  add to your app module ts or equivalent  import   NgModule        from   angular core   import   BrowserModule   from   angular platform-browser   import   FormsModule  ReactiveFormsModule   from   angular forms       lt    add the imports    import   AppComponent    from    app component      NgModule     imports        BrowserModule      FormsModule                                    lt            Add this line      ReactiveFormsModule                            lt            Add this line         declarations        AppComponent        other components of yours        bootstrap    AppComponent      export class AppModule      Failing to have one of these modules can lead to errors  including the one you face   Can t bind to  ngModel  since it isn t a known property of  input   Can t bind to  formGroup  since it isn t a known property of  form  There is no directive with  quot exportAs quot  set to  quot ngForm quot   If you re in doubt  you can provide both the FormsModule and the ReactiveFormsModule together  but they are fully-functional separately  When you provide one of these modules  the default forms directives and providers from that module will be available to you app-wide   Old Forms using ngControl  If you do have those modules at your  NgModule  perhaps you are using old directives  such as ngControl  which is a problem  because there s no ngControl in the new forms  It was replaced more or less  by ngModel  For instance  the equivalent to  lt input ngControl  quot actionType quot  gt  is  lt input ngModel name  quot actionType quot  gt   so change that in your template  Similarly  the export in controls is not ngForm anymore  it is now ngModel  So  in your case  replace  actionType  quot ngForm quot  with  actionType  quot ngModel quot   So the resulting template should be      gt s where changed    lt div class  quot form-group quot  gt       lt label for  quot actionType quot  gt Action Type lt  label gt       lt select       gt   ngModel       gt   name  quot actionType quot         gt    actionType  quot ngModel quot           id  quot actionType quot           class  quot form-control quot           required gt           lt option value  quot  quot  gt  lt  option gt           lt option  ngFor  quot let actionType of actionTypes quot  value  quot    actionType label    quot  gt                 actionType label             lt  option gt       lt  select gt    lt  div gt     More or less because not all functionality of ngControl was moved to ngModel  Some just were removed or are different now  An example is the name attribute  the very case you are having right now

User · Answer

I had this problem because I had a typo in my template near   ngModel     Extra bracket  Example    lt input id  descr  name  descr  type  text  required class  form-control width-half         ngClass     is-invalid   descr dirty  amp  amp   descr valid   maxlength  16    ngModel     category descr         disabled   isDescrReadOnly   descr  ngModel  gt

User · Answer

if ngModule is not working in input means try   remove double quotes around ngModule   like    lt input  form  ngModel    ngModel         gt  lt  input gt    instead of above   lt input  form ngModel   ngModel         gt  lt  input gt  try this

User · Answer

I had the same problem which was resolved by adding the FormsModule to the  spec ts   import   FormsModule   from   angular forms     and then adding the import to beforeEach   beforeEach async      gt      TestBed configureTestingModule       imports    FormsModule        declarations    YourComponent         compileComponents

User · Answer

I faced the same issue  I had missed the forms module import tag in the app module ts  import   FormsModule   from   angular forms     NgModule       imports   BrowserModule          FormsModule

User · Answer

Also realized this problem comes up when trying to combine reactive form and template form approaches  I had  name  ngModel  and  formControl   name  on the same element  Removing either one fixed the issue  Also not that if you use  name ngModel you should also have a property such as this   ngModel    name    otherwise  You will still get the errors  This applies to angular 6  7 and 8 too

User · Answer

If you are getting this instead   Error  Template parse errors  There is no directive with  quot exportAs quot  set to  quot ngModel quot   Which was reported as a bug in github  then likely it is not a bug since you might   have a syntax error  e g  an extra bracket    ngModel       OR be mixing Reactive forms directives  such as formControlName  with the ngModel directive  This  quot has been deprecated in Angular v6 and will be removed in Angular v7 quot   since this mixes both form strategies  making it     seem like the actual ngModel directive is being used  but in fact it s an input output property named ngModel on the reactive form directive that simply approximates  some of  its behavior  Specifically  it allows getting setting the value and intercepting value events  However  some of ngModel s other features - like delaying updates withngModelOptions or exporting the directive - simply don t work        this pattern mixes template-driven and reactive forms strategies  which we generally don t recommend because it doesn t take advantage of the full benefits of either strategy         To update your code before v7  you ll want to decide whether to stick with reactive form directives  and get set values using reactive forms patterns  or switch over to template-driven directives     When you have an input like this   lt input formControlName  quot first quot    ngModel    quot value quot  gt   It will show a warning about mixed form strategies in the browser s console   It looks like you re using ngModel on the same form field as formControlName   However  if you add the ngModel as a value in a reference variable  example   lt input formControlName  quot first quot   firstIn  quot ngModel quot    ngModel    quot value quot  gt   The error above is then triggered and no warning about strategy mixing is shown

User · Answer

Check that you have both ngModel and name attributes in your select  Also Select is a form component and not the entire form so more logical declaration of local reference will be -   lt div class  form-group  gt       lt label for  actionType  gt Action Type lt  label gt       lt select             ngControl  actionType             gt    actionType  ngModel              ngModel       You can go with 1 or 2 way binding as well             name  actionType              id  actionType               class  form-control               required gt               lt option value    gt  lt  option gt               lt option  ngFor  let actionType of actionTypes  value     actionType label     gt                     actionType label                 lt  option gt           lt  select gt        lt  div gt    One more Important thing is make sure you import either FormsModule in the case of template driven approach or ReactiveFormsModule in the case of Reactive approach  Or you can import both which is also totally fine

User · Answer

I had this problem and I realized I had not bound my component to a variable   Changed    lt input  myComponent  ngModel    gt    to    lt input  myComponent  ngModel    ngModel    myvar    gt

[angular] Angular2 Error: There is no directive with "exportAs" set to "ngForm"

Examples related to angular

Examples related to typescript

Examples related to angular2-forms