Il n'y a pas de directive avec "exportAs" défini sur "ngForm"

Question

Avoir cette dépendance de projet:

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

Et ce modèle de connexion:

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

Et ce composant de connexion:

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

J'ai cette erreur:

 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

Vous devez importer FormsModule non seulement dans le module racine AppModule, mais également dans chaque sous-module qui utilise des directives de formes angulaires.

 // SubModule A

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

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

Answer 3

Je sais que ceci est un ancien post, mais je voudrais partager ma solution. J'ai ajouté " ReactiveFormsModule " dans le tableau imports [] pour résoudre cette erreur

Erreur: Il n'y a pas de directive avec "exportAs" défini sur "ngForm" ("

Réparer:

module.ts

importer {FormsModule, ReactiveFormsModule } depuis '@ angular / forms'

  imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],
 

Answer 4

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

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

Answer 5

vérifiez si vous importez FormsModule. Il n'y a pas de ngControl dans la nouvelle version angular 2 release. vous devez changer votre modèle en exemple

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