TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"

Question

I keep getting this error while using TypeScript's Angular2-forms framework:

There is no directive with "exportAs" set to "ngForm"

Here's my code

project dependencies :

 "dependencies": { "@angular/common": "2.0.0-rc.6", "@angular/compiler": "2.0.0-rc.6", "@angular/core": "2.0.0-rc.6", "@angular/forms": "2.0.0-rc.6", "@angular/http": "2.0.0-rc.6", "@angular/platform-browser": "2.0.0-rc.6", "@angular/platform-browser-dynamic": "2.0.0-rc.6", "@angular/router": "3.0.0-rc.2", "ng2-bootstrap": "^1.1.1", "reflect-metadata": "^0.1.8", "core-js": "^2.4.0", "es6-module-loader": "^0.17.8", "rxjs": "5.0.0-beta.11", "systemjs": "0.19.27", "zone.js": "0.6.17", "jquery": "3.0.0", }

And this is the Login Template :

<form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)"> </form>

...and the Login Component :

import { Component } from '@angular/core'; import {Http, Headers} from '@angular/http'; @Component({ moduleId: module.id, selector: 'login-cmp', templateUrl: 'login.component.html' }) export class LoginComponent { constructor($http: Http) { this.$http = $http; } authenticate(data) { ... } }

I have this Error :

zone.js?1474211973422:484 Unhandled Promise rejection: Template parse errors: There is no directive with "exportAs" set to "ngForm" (" <form [ERROR ->]#loginForm="ngForm" (ngsubmit)="authenticate(loginForm.value)">

micronyks · Accepted Answer · 2017-10-02 07:30:46Z

590

import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ BrowserModule, FormsModule //<----------make sure you have added this. ], .... })

edited Oct 2, 2017 at 7:30

answered Sep 18, 2016 at 15:25

micronyks

55.5k17 gold badges120 silver badges162 bronze badges

48
I've done this and I still get the error. Any other ideas? (I'm on the release version.)
– David Pfeffer
CommentedOct 13, 2016 at 14:16
46
It must be bound to <form> element
– pop
CommentedFeb 23, 2017 at 9:17
12
my problem solved with add ReactiveFormsModule in my module.
– Mohammad Mirzaeyan
CommentedMar 15, 2018 at 21:16
<form #employeeForm="ngForm" class="emp-form" write properties you want it >
– Omar Isaid
CommentedJul 31, 2018 at 15:56
1
Make sure your component in the declarations in the app.module.ts
– Shamil Keheliya
CommentedJan 18, 2023 at 6:58

| Show 2 more comments

TetraDev · Accepted Answer · 2017-08-09 21:35:09Z

You have to import FormsModule into not only the root AppModule, but also into every subModule that uses any angular forms directives.

// SubModule A import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ CommonModule, FormsModule //<----------make sure you have added this. ], .... })

You can add to export array, then you'll not need to add it to multiple submodules imports — Samih A, CommentedJan 2, 2018 at 13:02
@SamihA Please explain with example, the export array goes in AppModule or Submodule A? — TetraDev, CommentedJan 2, 2018 at 17:22

Tomerikoo · Accepted Answer · 2021-12-16 14:00:36Z

I have added ReactiveFormsModule in imports[] array to resolve this error.

Error: There is no directive with "exportAs" set to "ngForm" ("

Fix:

module.ts:

import {FormsModule, ReactiveFormsModule} from '@angular/forms' imports: [ BrowserModule, FormsModule , ReactiveFormsModule ],

Also be aware that component that uses this directives is declared(in declaration property of NgModule) besides FormsModule import — Anton, CommentedSep 2, 2021 at 23:43

Günter Zöchbauer · Accepted Answer · 2016-11-08 15:14:36Z

19

import { FormsModule } from '@angular/forms'; @NgModule({ imports: [FormsModule], ... })

edited Nov 8, 2016 at 15:14

answered Sep 18, 2016 at 15:24

Günter Zöchbauer

659k234 gold badges2.1k silver badges1.6k bronze badges

Add a comment |

seven · Accepted Answer · 2022-11-14 09:34:32Z

(Just in case someone else is blind like me) formFTW! Make sure to use <form> tag

wont work:

<div (ngSubmit)="search()" #f="ngForm" class="input-group"> <span class="input-group-btn"> <button class="btn btn-secondary" type="submit">Go!</button> </span> <input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search..."> </div>

works like a charm:

 <form (ngSubmit)="search()" #f="ngForm" class="input-group"> <span class="input-group-btn"> <button class="btn btn-secondary" type="submit">Go!</button> </span> <input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search..."> </form>

Mason240 · Accepted Answer · 2020-12-18 02:04:08Z

Another item check:

Make sure you component is added to the declarations array of @NgModule in app.module.ts

@NgModule({ declarations: [ YourComponent, ],

When running the ng generate component command, it does not automatilly add it to app.module.

seawave_23 · Accepted Answer · 2019-11-28 16:27:32Z

In case a name is assigned like this:

#editForm="testForm"

... the exportAs has to be defined in the component decorator:

selector: 'test-form', templateUrl: './test-form.component.html', styleUrls: ['./test-form.component.scss'], exportAs: 'testForm'

Watercycle · Accepted Answer · 2020-04-01 17:31:16Z

This

<div #myForm="ngForm"></div>

Also causes the error and can be fixed by including the ngForm directive.

<div ngForm #myForm="ngForm"></div>

Massimiliano Kraus · Accepted Answer · 2018-01-26 21:56:09Z

check whether you import FormsModule. There's no ngControl in the new forms angular 2 release version. you have to change your template to as an example

<div class="row"> <div class="form-group col-sm-7 col-md-5"> <label for="name">Name</label> <input type="text" class="form-control" required [(ngModel)]="user.name" name="name" #name="ngModel"> <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div> </div> </div>

Tomerikoo · Accepted Answer · 2021-12-16 13:57:47Z

Three Things you have to care:

If you're using the sub-module, you have to import the FormModule in that sub module:
```
imports:[CommonModule, HttpModule, FormsModule] 
```

You have to exports the FormModule in the module:

exports:[FormsModule]

so together it looks like:

imports:[CommonModule, HttpModule, FormsModule], exports:[FormsModule],

In the top of the file you have to import the FormsModule:
```
import {FormsModule} from '@angular/forms'; 
```

If you are using only the app.module.ts then no need to export. Only import required.

If you use FormsModule within your own module you need the following in your xxxx.modules.ts. Import Forms from Angular: import { FormsModule } from '@angular/forms'; Add it to the imports array NgModule: @NgModule({ imports: [ FormsModule ], — Koen van der Linden, CommentedFeb 1, 2018 at 12:35

Jo Paul · Accepted Answer · 2018-03-21 08:08:07Z

In addition to import the form module in login component ts file you need to import NgForm also.

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

This resolved my issue

HV Sharma · Accepted Answer · 2020-04-21 16:46:11Z

I've come to this same question over & over again, also due to same reason. So let me answer this by saying what wrong I was doing. Might be helpful for someone.

I was creating component via angular-cli by command

ng g c components/something/something

What it did, was created the component as I wanted.

Also, While creating the component, it added the component in the App Module's declarations array.

If this is the case, please remove it. And Voila! It might work.

Anna · Accepted Answer · 2019-10-31 05:31:37Z

import { FormsModule,ReactiveFormsModule }from'@angular/forms'; imports:[ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), HttpClientModule, FormsModule, ReactiveFormsModule/*This one in particular*/,... ],

in app.module.ts to permanently solve errors like "cannot bind [formGroup] or no directive with export as".

Dinesh Gurjar · Accepted Answer · 2021-04-07 06:53:42Z

Yes i faced same problem...I did above all things but not worked. This one solved my problem. Because we are using angular 'with' in strict mode.

in app.module.ts add this code

import {FormsModule, ReactiveFormsModule} from '@angular/forms' imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],

and which file you are using NgForm in .html file

<form #form="ngForm" (ngSubmit)="loginSubmit(form);"> </form>

and in .ts file

import { NgForm } from '@angular/forms'; @Component({ selector: 'app-login-page', templateUrl: './login-page.component.html', styleUrls: ['./login-page.component.scss'] }) export class LoginPageComponent implements OnInit { NgForm=NgForm;//this one solve my problem...initialization and declaration }

oswaldo ortega · Accepted Answer · 2021-04-28 20:41:25Z

3

You must declare FormsModule and must declare also the Compoponent

declarations: [ YourComponent --> ], imports: [ BrowserModule, FormsModule, --> ],

answered Apr 28, 2021 at 20:41

oswaldo ortega

571 bronze badge

This was the case for me. I add FormsModule but did not add my component in the AppModule and it was giving me error. thanks
– MindRoasterMir
CommentedSep 20, 2021 at 21:10
i have added this line import { FormsModule } from '@angular/forms'; in app.module.ts and in app.componenet.html <form #signUpForm="ngForm" (ngSubmit)="onSubmit(signUpForm)"> </form> create onSubmit() function in app.component.ts now my form is working fine
– ANiket Chavan
CommentedJun 15, 2024 at 14:34

Add a comment |

Tomerikoo · Accepted Answer · 2021-12-16 14:01:31Z

If you already import FormsModule, then you just need to remove formControlName='whatever' from the input fields.

Sandeep Kumar · Accepted Answer · 2020-05-10 05:22:32Z

This error also occurs if you are trying to write a unit test case in angular using jasmine.

The basic concept of this error is to import FormsModule. Thus, in the file for unit tests, we add imports Section and place FormsModule in that file under

 TestBed.configureTestingModule For eg: TestBed.configureTestingModule({ declarations: [ XYZComponent ], **imports: [FormsModule]**, }).compileComponents();

Savan Gadhiya · Accepted Answer · 2020-09-14 16:18:50Z

In my case, I forgot to add my component in the Declaration array of app.module.ts, and voila! the issue was fixed.

Tomerikoo · Accepted Answer · 2021-12-16 14:09:30Z

Almost all the answers talk about adding the FormsModule module but in my case the import is already done. As said in an answer to the question, you have to close and restart VScode or in my case you have to save your workspace with "Save workspace as ..." and everything will work normally again.

Please add further details to expand on your answer, such as working code or documentation citations. — Community, CommentedSep 6, 2021 at 1:40
Very good but this also did not work. error is there. thanks — MindRoasterMir, CommentedSep 20, 2021 at 21:08

Thishan Dharmakeerthi · Accepted Answer · 2022-07-13 21:55:49Z

If you have already imported and added the FormsModule to the Sub Module that you are going to use, and still facing the error,

1. You may missed it to add the root AppModule. (silly but it happens sometimes)2. Make sure you have added relevant package and referenced it in systemjs.config.js

Shamil Keheliya · Accepted Answer · 2023-01-18 00:07:19Z

In your app.module.ts

Make sure,

FormsModule in imports
SampleComponent in declarations

Samwise Ganges · Accepted Answer · 2023-10-01 20:19:45Z

None of the other answers worked for me (Angular 16.2.7) but this did. Change the HTML element in the template from this:

<form #myForm="ngForm" >

To either this:

<form #myForm ngForm >

Or this:

<form myForm="ngForm" >

These are from this GitHub post about the issue.

halfer · Accepted Answer · 2025-02-01 11:20:33Z

1

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

edited Feb 1 at 11:20

halfer

20.4k19 gold badges109 silver badges202 bronze badges

answered Jul 25, 2024 at 16:16

Markus

1,24118 silver badges22 bronze badges

Add a comment |

Artur O · Accepted Answer · 2019-06-06 10:45:54Z

You should terminate app with ctrl+c and re run it with ng serve, if you did not include FormsModule into you app.module file imports array, and then added it later, angular does not know it, it does not re-scan modules, you should restart app so angular could see that new module is included, after what it will included all features of template drive approach

Michael · Accepted Answer · 2020-02-14 19:59:17Z

In my case I had to remove the ngNoForm attribute from my <form> tag.

If you you want to import FormsModule in your application but want to skip a specific form, you can use the ngNoForm directive which will prevent ngForm from being added to the form

Reference: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

user1874594 · Accepted Answer · 2020-04-12 12:53:58Z

I just moved routing modules i.e. say ARoutingModule above FormsModule and ReactiveFormsModule and after CommonModule in imports array of modules.

Siddharth Jain · Accepted Answer · 2021-06-17 12:15:37Z

Agree with the solution provided by @micronyks but that hold's true if you've simple application which doesn't have many modules within it. Otherwise, we need to add in similar way to module where we're using that <form #loginForm="ngForm"> element and adding below code inside that module if you don't want to expose it to all modules or whole application.

import FormsModule from '@angular/forms'; @NgModule{ imports: [FormsModule], }

Akib · Accepted Answer · 2023-09-15 13:24:11Z

If you are using directive. make sure you add exportAs: 'something' with selector

Collectives™ on Stack Overflow

TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"

28 Answers 28

Linked

Hot Network Questions

Collectives™ on Stack Overflow

28 Answers 28

Linked

Related