When add ngForm getting error `no directive with "exportAs" set to "ngForm"`

[bharatpatil21]

Error: Template parse errors: There is no directive with "exportAs" set to "ngForm" ("v class="col-lg-12"> <form name="projectForm" (ngSubmit)="f.form.valid && addProject()" [ERROR ->]#f="ngForm">

Also added import { FormsModule, ReactiveFormsModule } from '@angular/forms'; in app.module

[ra11]

Facing Same issue.

[ngvanmy]

Same issue.

[xiankaylle019]

Any solution?

[mahmoudsror]

Make sure that you import FormsModule in app.module.ts

like that

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

and add it to imports like that :-

imports: [ BrowserModule, FormsModule,
],

that is worked for me

[goneos]

I did what @mahmoudsror says above (and found the same lots of other places) and it didn't work for me. Also imported at the form component level too... still no luck.

[SudhirSahoo]

Make sure below things:

1. import FormsModule as mahmoudsror says in app.module.ts import {FormsModule} from '@angular/forms'; imports: [ BrowserModule, FormsModule, ],

2. in your html for make sure the #projectForm='ngForm' and same name in button

<form (ngSubmit)="onSubmit()" #projectForm="ngForm" class="form-horizontal">
. . .
. . .
. . .
<button type="submit" class="btn btn-success" [disabled]="!projectForm.form.valid">
        <i class="fa fa-floppy-o" aria-hidden="true"></i> Save
    </button>

[vishwas097]

No proper solution for this error! I haven't found it anywhere.

[ethyaan]

I'm facing the same issue, all of the imports are fine, but still don't know what is the reason ...

[nagarajussg]

Thank You

[Vilaggio]

I had <form #regform="ngform"> after removing the "#" the error went away.

this worked for me: <form regform="ngform">

[dixitomkar1809]

I was using two modules, and importing ReactiveFormsModule in the right module did it for me... :D

[mohammed7690]

I had the same issue with after import the form module with this <form #form="ngform" autocomplete="off"> but changing it to this has worked <form #form="ngForm" autocomplete="off"> so changing the 'ngform' to 'ngForm' worked. Simple mistake but hard to catch.

[Anwar-Ul-Haq]

I am facing the same issue and tried all above mentioned solutions and none of them worked for me.

[mariocsantos]

I've updated to angular 9 and now I'm facing the same issue

[vamseeds]

Same problem in Angular 9

form class="form" [formGroup]="postForm" #formDirective="ngForm" (ngSubmit)="onSubmit(postForm.value,formDirective)"

[mariocsantos]

Updated to Angular 9.0.1 and it works fine

[RaashidFuzail]

Guys if anyone is defining serparate multiple modules then: import { FormsModule, ReactiveFormsModule } from '@angular/forms'; is needed for every module(wherever ngForm or Reactive forms are being used)

and then under: @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule ] })

Note: If you are using any separate xyz-routing.module.ts file then you need to do above import statement in this file as well(if you are using import statement and decalaring the component in which you are using ngForm or reactive form) under xyz-routing.module.ts). Otherwise you need to import and declare that component under xyz.module.ts.

We are getting error again and again bcz we are not providing import statement for that specific module under which the component lies which we are using Reactive form or NgForm

Hope this does the trick Thanks

[haguezoum]

if u fide the sulotion share it with us thank u <3

[AnasKamali]

ERROR in src/app/app.module.ts:14:5 - error NG6001: Cannot declare 'CommonModule' in an NgModule as it's not a part of the current compilation.

14 CommonModule, ~~~~~~~~~~~~

node_modules/@angular/common/common.d.ts:118:22 118 export declare class CommonModule { ~~~~~~~~~~~~ 'CommonModule' is declared here. src/app/app.module.ts:15:5 - error NG6001: Cannot declare 'FormsModule' in an NgModule as it's not a part of the current compilation.

15 FormsModule, ~~~~~~~~~~~

node_modules/@angular/forms/forms.d.ts:2748:22 2748 export declare class FormsModule { ~~~~~~~~~~~ 'FormsModule' is declared here. src/app/app.module.ts:16:5 - error NG6001: Cannot declare 'ReactiveFormsModule' in an NgModule as it's not a part of the current compilation.

16 ReactiveFormsModule ~~~~~~~~~~~~~~~~~~~

node_modules/@angular/forms/forms.d.ts:3806:22 3806 export declare class ReactiveFormsModule { ~~~~~~~~~~~~~~~~~~~ 'ReactiveFormsModule' is declared here. src/app/app.component.html:1:1 - error NG8001: 'myform' is not a known element:

1. If 'myform' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

1

src/app/app.component.ts:5:16
  5   templateUrl: './app.component.html',
  7m                 ~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component AppComponent.
src/app/myform/myform.component.ts:7:50 - error NG8003: No directive found with exportAs 'ngModel'.

7     <input name="first" ngModel required #first="ngModel">
                                                 ~~~~~~~
src/app/myform/myform.component.ts:6:13 - error NG8003: No directive found with exportAs 'ngForm'.

6   <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
            ~~~~~~
src/app/myform/myform.component.ts:14:31 - error NG8004: No pipe found with name 'json'.

14   <p>Form value: {{ f.value | json }}</p>
                               ~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

[iTouchi]

I had the same issue and tried every solution above, but non of them worked for me. The reason it didn't work for me is because I forgot to add my form-component.ts to the declarations: of app.module.ts.

So in my case I have a login.component. which uses the ngForm in app.module.ts I imported login.component and added it to the declarations

import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    LoginComponent
  ],

[GCour]

@iTouchi That solved it for me!

[AshishGupta11011]

I copied some components from one project to another and i got this error even after importing all the modules,i forgot to declare the components in declarations in app.module.ts.So delclare the components!

[rapPayne]

This will also occur on an input if you've forgotten to put [(ngModel)]="someProperty" on the input itself.

[Samad-Ansari]

if nothing is working then the last option is that i have tried and it works, Change the directory of the component to nearest to the app.module.ts app -> feeds-component app.module.ts app.component.ts

i have tried everything but this was last thing that worked for me !

[RanjanSrivastava]

Please make sure in app.module.ts import { FormsModule, ReactiveFormsModule } from '@angular/forms'; imports: [ FormsModule, ReactiveFormsModule, BrowserModule, AppRoutingModule]

It will definitely work.

In the component level ..Please use import { NgForm } from '@angular/forms'; as well.

[dmusic]

I needed to import additionally ReactiveFormsModule (in addition with FormsModule). This worked then:

<form #loginForm="ngForm" (ngSubmit)="login(loginForm.value)" autocomplete="off"> ... <input name="userName" ngModel id="userName" type="text" class="form-control" placeholder="User Name" />

This start occurring with Angular 11.

[Maruthi2]

Error: Template parse errors: There is no directive with "exportAs" set to "ngForm" ("v class="col-lg-12">

]#f="ngForm">

Also added import { FormsModule, ReactiveFormsModule } from '@angular/forms'; in app.module

This would work @ViewChild('f', { static: false }) slForm: NgForm;

[ghidhaso]

change <form #loginForm="ngForm" > to <form #loginForm ngForm >

[perkoren]

I'm facing similar issue - when building for the prod environment

ng build --prod

I'm getting a lot of parse errors

error NG8003: No directive found with exportAs 'ngForm'.

15 <form [formGroup]="loginForm" (ngSubmit)="login()" #f="ngForm">

No directive found with exportAs 'ngbDatepicker'.

46 <input class="form-control" id="inputDob" name="dob" formControlName="dob" [minDate]="{year: 1920, month: 1, day: 1}" ngbDatepicker #d2="ngbDatepicker">

Everything works fine when building for dev: ng build

When I disable AOT in the angular.json configuration section for production, it all builds fine:

          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }

[jaylee79]

change <form #loginForm="ngForm" > to <form #loginForm ngForm >

Where did you get this info? Worked for me for Angular 11. I didn't realize Angular 11 changed this stuff...