There is no directive with the parameter "exportAs" set to "ngForm",

Question

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 entry template:

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

And this input 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)"> 

Answer 1

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

Answer 2

You need to import FormsModule not only in the root AppModule, but also in every subModule that uses any angular form directives.

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

Answer 3

I know this is an old post, but I would like to share my decision. I added " ReactiveFormsModule " in the import [] array to fix this error

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

Fix:

module.ts

import {FormsModule, ReactiveFormsModule } of '@ angular / forms'

  imports: [ BrowserModule, FormsModule , ReactiveFormsModule ], 

Answer 4

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

Answer 5

(Just in case someone is blind, like me) form FTW ! Be sure to use the <form> tag <form>

does not 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> 

Answer 6

check if you are importing FormsModule. There is no ngControl in the new forms of angular version 2 release. You should change your template 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> 

Answer 7

Two things you must take care ..

1. If you are using a submodule, you must import the FormModule into this submodule.

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

2. You must export a FormModule to a module

     **exports:[FormsModule],** 

   so together it looks like an import: [CommonModule, HttpModule, FormsModule], export: [FormsModule],

3. at the top you should import FormsModule

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

---

if you use only app.module.ts then

no need to export .. only import required

Answer 8

I ran into this problem, but none of the answers here worked for me. I googled and found that FormsModule not shared with Feature Modules

So, if your form is in a function module, you need to import and add FromsModule there.

Please write: https://github.com/angular/angular/issues/11365

Answer 9

In addition to importing the form module into the ts file of the login component, you must also import NgForm.

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

It solved my problem

Answer 10

You must import the FormsModule and then put it in the import section.

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

Answer 11

Simply, if you do not have an import module, import and declare import {FormsModule} from '@ angular / forms';

and if you did, then you just need to remove formControlName = 'what' from the input fields.

Answer 12

You must terminate the application using Ctrl + C and restart it using NG serve

Answer 13

I had the same problem and I decided to update all its dependencies (package.json) with the following command npm update -D && npm update -S

As @ Günter Zöchbauer pointed out, first enable the FormsModule.