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

Question

When I use TypeScript's Angular2-forms framework I keep getting this error:

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

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

  }

Login Template :

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

</form>

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

   ... 

  }

}

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

Can someone help me with this issue?

narikkadan · Answer 1 · May 23, 2022

Try this:

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

@NgModule({
  imports: [
             BrowserModule,

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

It worked for me. I hope it helps you.