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

0 votes

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?

May 23, 2022 in Angular by Kichu
• 19,050 points
3,090 views

1 answer to this question.

0 votes

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.

answered May 23, 2022 by narikkadan
• 63,420 points

Related Questions In Angular

0 votes
1 answer

How to make FileReader work with Angular?

Hello @kartik, First you have to specify the ...READ MORE

answered Sep 8, 2020 in Angular by Niroj
• 82,880 points
25,343 views
0 votes
1 answer

What is Angular framework?

Angular is an open-source web application framework ...READ MORE

answered Jan 12 in Angular by Vaishali
150 views
0 votes
1 answer

What is shared scope(in Directive)?

Assuming that you have knowledge on Scope( ...READ MORE

answered Feb 4, 2020 in Angular by Niroj
• 82,880 points
934 views
0 votes
1 answer

What is inherited/child scope in directive?

Hey kartik, As you use the term inheritance ...READ MORE

answered Feb 5, 2020 in Angular by Niroj
• 82,880 points
938 views
0 votes
1 answer

What is the difference between Call back transclusion function and no call back transclusion function?

Hey,    There is no difference between clone linking and ...READ MORE

answered Feb 5, 2020 in Angular by Niroj
• 82,880 points
460 views
0 votes
1 answer
0 votes
1 answer

Can't bind to 'formGroup' since it isn't a known property of 'form'

In order to rectify this error, you ...READ MORE

answered Feb 10, 2022 in Others by Rahul
• 9,670 points
18,124 views
0 votes
1 answer

How to apply zoom animation for each element of a list in angular?

Hey @Sid, do check if this link ...READ MORE

answered Jul 30, 2019 in Others by Vardhan
• 13,190 points
1,193 views
0 votes
1 answer
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11, 2022 in Others by narikkadan
• 63,420 points
1,897 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP