web-dev-qa-db-fra.com

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

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)">
angularangular2-forms
182
Nassim MOUALEK
import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [
             BrowserModule,

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

Vous devez importer FormsModule non seulement dans le module racine AppModule, mais également dans chaque sous-module qui utilise toutes les directives angular.

// SubModule A

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

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

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

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

Correction:

module.ts

import {FormsModule, ReactiveFormsModule} à partir de '@ angular/forms'

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],
37
Shakeer Hussain
import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [FormsModule],
  ...
})
14
Günter Zöchbauer

(Juste au cas où quelqu'un d'autre est aveugle comme moi) formFTW! Assurez-vous d'utiliser la balise <form>

ne fonctionnera pas:

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

fonctionne comme un charme:

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

vérifiez si vous importez FormsModule. Il n'y a pas de ngControl dans les nouvelles versions angular 2 version. 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>
5
Md Ayub Ali Sarker

J'ai fait face à ce problème, mais aucune des réponses ici n'a fonctionné pour moi. J'ai googlé et trouvé que FormsModule not shared with Feature Modules

Donc, si votre formulaire est dans un module en vedette, vous devez importer et ajouter le FromsModule ici.

S'il vous plaît réf: https://github.com/angular/angular/issues/11365

2
Prasanth Bendra

Deux choses que vous devez vous soucier ..

  1. Si vous utilisez le sous-module, vous devez importer le FormModule dans ce sous-module.

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

  2. vous devez exporter le FormModule dans le module

        **exports:[FormsModule],**

    donc, ensemble, cela ressemble à importations: [CommonModule, HttpModule, FormsModule], exportations: [FormsModule],

  3. dans Top vous devez importer le FormsModule

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

si vous utilisez uniquement le fichier app.module.ts,

pas besoin d'exporter .. seulement importation requise

2
shajahan

Vous devez importer le FormsModule, puis le placer dans la section des importations.

import { FormsModule } from '@angular/forms';
0
Ricardo Tovar

Simple si vous n'avez pas de module d'importation, importez et déclarez importez {FormsModule} de '@ angular/forms';

et si vous le faisiez, il vous suffira de supprimer formControlName = 'quoique' des champs de saisie.

0
Hasnain Ali Sohrani

Vous devez terminer app avec ctrl + c et l'exécuter à nouveau avec ng serve, si vous n'incluez pas FormsModule dans votre tableau d'importations de fichiers app.module, puis l'ajoutez plus tard, angular ne le sait pas, il ne ré-analyse pas les modules, vous devez redémarrer l'application pour que angular puisse voir que le nouveau module est inclus, après quoi il inclura toutes les fonctionnalités de l'approche du lecteur de modèle

0
Artur O

En plus d'importer le module de formulaire dans le fichier ts du composant de connexion, vous devez également importer NgForm.

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

Cela a résolu mon problème

0
Jo Paul