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

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

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

@NgModule({
  imports: [
             BrowserModule,

             FormsModule      //<----------make sure you have added this.
           ],
  ....
})

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.
  ],
  ....
})

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
  ],

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

@NgModule({
  imports: [FormsModule],
  ...
})

(Just in case someone else is blind like me) form FTW! 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 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>

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'

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>

Three Things you have to care:

1. If you're using the sub-module, you have to import the FormModule in that sub module:

   imports:[CommonModule, HttpModule, FormsModule]
   

2. You have to exports the FormModule in the module:

   exports:[FormsModule]
   

   so together it looks like:

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

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

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

This

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

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

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

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.

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.

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

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();

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

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.

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

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
}

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

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/

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

You must declare FormsModule and must declare also the Compoponent

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

    
  ],

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

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

> .HTML file