Erreur de structure angulaire de TypeScript - «Il n'y a pas de directive avec exportAs défini sur ngForm»


226

Je continue à recevoir cette erreur lors de l'utilisation du framework Angular2-forms de TypeScript:

Il n'y a pas directivede "exportAs" réglé sur "ngForm"

Voici mon code

dépendances du 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 voici le modèle de connexion:

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

... et le 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)">

Réponses:


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

@NgModule({
  imports: [
             BrowserModule,

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

32
Je l'ai fait et je reçois toujours l'erreur. D'autres idées? (Je suis sur la version finale.)
David Pfeffer

30
Il doit être lié à l'élément <form>
pop

6
@pop Merci, l'ajoutait à divet a provoqué cette erreur.
Arg0n

1
Merci, je continue d'oublier que cela va dans le importstableau, et non dans le providerstableau
TetraDev

9
mon problème résolu avec l'ajout de ReactiveFormsModule dans mon module.
Mohammad Mirzaeyan

50

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

// SubModule A

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

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

1
Vous pouvez ajouter au tableau d'exportation, vous n'aurez alors pas besoin de l'ajouter à plusieurs importations de sous-modules
Samih A

@SamihA Veuillez expliquer avec un exemple, le tableau d'exportation va dans AppModule ou sous-module A?
TetraDev

N'oubliez pas non plus d'importer ReactiveFormsModule
Snedden27

A fonctionné pour moi - mais j'ai trouvé qu'il n'a pas effacé l'erreur jusqu'à ce que j'ai tué npm et relancé npm run start.
Dovev Hefetz

45

Je sais que c'est un ancien poste, mais je voudrais partager ma solution. J'ai ajouté " ReactiveFormsModule " dans le tableau des importations [] 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
  ],

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

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

4
Je l'ai fait et je reçois toujours l'erreur. D'autres idées? (Je suis sur la version finale.)
David Pfeffer

16
Avez-vous déjà compris cela? Ayant la même erreur et j'ai également FormsModule importé.
Josh

8

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

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>

6

Dans le cas où un nom est attribué comme ceci:

#editForm="testForm"

... l'exportAs doit être défini dans le décorateur de composants:

selector: 'test-form',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.scss'],
exportAs: 'testForm'

cela a fonctionné pour moi, alors que la solution acceptée n'a pas fonctionné.
ir0h

confirmant que c'est quelque chose qui doit être fait en plus de la solution acceptée
hello_earth

5

vérifiez si vous importez FormsModule. Il n'y a pas de ngControl dans la nouvelle version angulaire de formulaires 2. 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>

3

Deux choses dont 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],**

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

  3. en haut, vous devez importer le FormsModule

    importer {FormsModule} depuis '@ angular / forms';


si vous utilisez uniquement app.module.ts,

pas besoin d'exporter .. seulement importation requise


1
Si vous utilisez FormsModule dans votre propre module, vous avez besoin des éléments suivants dans vos xxxx.modules.ts. Formulaires d'importation depuis Angular: import { FormsModule } from '@angular/forms'; ajoutez-le au tableau des importations NgModule: @NgModule({ imports: [ FormsModule ],
Koen van der Linden

2

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

Donc, si votre formulaire est dans un module en vedette, vous devez alors l'importer et l'ajouter FromsModule.

Veuillez ref: https://github.com/angular/angular/issues/11365


2

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


J'ai eu cette erreur: Erreur non interceptée: directive "NgForm" inattendue importée par le module
Steffi Keran Rani J

1
import { FormsModule,ReactiveFormsModule }from'@angular/forms';

imports:[
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule/*This one in particular*/,...
],

dans app.module.ts pour résoudre définitivement les erreurs comme "cannot bind [formGroup] or no directive with export as".



1

Je suis venu à cette même question encore et encore, également pour la même raison. Alors permettez-moi de répondre à cela en disant ce que je faisais de mal. Cela pourrait être utile pour quelqu'un.

Je créais un composant via une angular-clicommande

ng gc components / quelque chose / quelque chose

Ce qu'il a fait, a été créé le composant comme je le voulais.

En outre, lors de la création du composant, il a ajouté le composant dans le tableau de déclarations du module d'application .

Si tel est le cas, veuillez le retirer. Et le tour est joué! Cela peut fonctionner.


0

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

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

0

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

et si vous l'avez fait, il vous suffit de supprimer formControlName = 'any' des champs de saisie.


0

Vous devez terminer l'application avec ctrl + c et l'exécuter à nouveau avec ng serve, si vous n'avez pas inclus FormsModule dans votre tableau d'importations de fichiers app.module, puis l'ajouté plus tard, angular ne le sait pas, il ne ré-analyse pas les modules , vous devez redémarrer l'application pour que angulaire 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

Je viens de déplacer les modules de routage, c'est-à-dire dire ARoutingModule au-dessus de FormsModule et ReactiveFormsModule et après CommonModule dans le tableau des importations de modules.


0

Importez simplement le module correct,

"FormsModule"

import { FormsModule } from "@angular/forms";
@NgModule({
  imports: [
    BrowserModule,
    FormsModule //<---.
  ],
  ....
})

0

Cette erreur se produit également si vous essayez d'écrire un cas de test unitaire en angulaire à l'aide de jasmin.

Le concept de base de cette erreur est de import FormsModule. Ainsi, dans le fichier de tests unitaires, nous ajoutons la section des importations et plaçons FormsModule dans ce fichier sous

    TestBed.configureTestingModule
    For eg: 
    TestBed.configureTestingModule({
        declarations: [ XYZComponent ],
        **imports: [FormsModule]**,
    }).compileComponents();

-3

J'ai eu le même problème et l'ai résolu en mettant à jour toutes les dépendances (package.json) avec la commande suivante npm update -D && npm update -S

Comme l'a souligné @ Günter Zöchbauer, assurez-vous d'inclure d'abord le FormsModule.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.