There is no directive with “exportAs” set to “ngForm”
Today in this article, we will see how to fix error “There is no directive with exportAs set to ngForm”
Issue Description:
The angular app shows the below error in the browser,
There is no directive with "exportAs" set to "ngForm"
Resolution:
Please register FormsModule or ReactiveFormsModule in NgModule.
In app.module.ts, please add the below import statement,
import { FormsModule } from '@angular/forms' import { ReactiveFormsModule} from '@angular/forms'
Also please update the import section as below,
imports: [
BrowserModule,
HttpClientModule,
ReactiveFormsModule,
FormsModule
],
Please add ‘FormsModule’/ReactiveFormsModule’ in imports section of NgModule
Sample app.module.ts as below,
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserSettingsFormComponent } from './user-settings-form/user-settings-form.component';
@NgModule({
declarations: [
AppComponent,
UserSettingsFormComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Fix – Test Project Configuration
You might see a similar error while writing unit test cases in the Spec file too.
If you come across any issue kindly perform the similar above steps to fix the issue.
That’s all! Happy coding!
Does this help you fix your issue?
Do you have any better solutions or suggestions? Please sound off your comments below.
Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published(2024) best practices and guidelines for software design and development.
hello i have the problèmes in ngForm not found please help me
Hello TIbari- Thanks for your query. above mentioned steps should resolve the issue. May I know which version of Angular you are using?
This did not solve the problem for me.
src/app/user/signup/signup.component.html:15:39 – error NG8003: No directive found with exportAs ‘ngForm’.
15
This is the error.
I have the component in a module. I have imported FormsModule in app.module.ts as well as user.module.ts (which is the module am using the current component in). And the error persists. Either all the solutions pointing the same thing as IMPORT FORMSMODULE is wrong, or Angular is drunk
hi
i am new to angular9
i have created a new module ui and in that i have created a form component
but in the form template ngFrom is not resolving i have already tried in
app.module.ts and ui.module.ts adding the NgFroms in import section
just want to know where i am wrong in this
Hey Adarsh- Please follow the above guidelines. Please visit the article on Getting started with Form validation in Angular for more information. Hope this helps.
Thank you ! worked for me .
Thanks Aarti, Glad it helped you!
this will not work for me
Thanks Shahid , could you confirm if it worked or not ?