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"
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.



9 thoughts on “There is no directive with exportAs set to ngForm

    1. Hello TIbari- Thanks for your query. above mentioned steps should resolve the issue. May I know which version of Angular you are using?

      1. 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

  1. 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

Leave a Reply

Your email address will not be published. Required fields are marked *