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.