Home/ Questions/How to deal with the there is no directive with "exportas" set to "ngform" errors?
Next
Answered
Kaden Walsh
  • 25
Asked: 2022-05-18T15:42:41+00:00 In:

How to deal with the there is no directive with “exportas” set to “ngform” errors?

  • 25

. Advertisement .

..3..

. Advertisement .

..4..

I am tired of fixing the problem: there is no directive with “exportas” set to “ngform” in the typescript; even if I get the reference from another forum, it still returns an error:

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

To identify the problem, I will show you the detail here:

"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",
  }
<form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)">
 </form>
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) {
  ... 
  }
 }
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)">

How do I do that? Could you support me to improve this problem?

exportas set to ngform
Share

2 Answers

  1. Best Answer
    Expert

    The cause: This problem happens because you only import FormsModule into the root AppModule.

    The solution: To solve this error, FormsModule must be imported not only into the root AppModule, but also into every subModule that employs 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.
  ],
  ....
})
    • 17

  2. FormsModule must be imported into ‘s root AppModule. 

    // SubModule A

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

@NgModule({
 imports: [
 CommonModule,
 FormsModule //<----------make sure you have added this.
 ],
 ....
})
    • 17

Leave an answer

You must login to add an answer.

Need An Account,