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

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

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

@NgModule({
  imports: [
             BrowserModule,

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

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.
  ],
  ....
})

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

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

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

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

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'

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>

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

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

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

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

Ce

<div #myForm="ngForm"></div>

Provoque également l'erreur et peut être corrigé en incluant la directive ngForm .

<div ngForm #myForm="ngForm"></div>

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.

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

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

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.

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

Dans mon cas, j'ai dû supprimer l' ngNoFormattribut de ma <form>balise.

Si vous souhaitez importer FormsModule dans votre application mais que vous souhaitez ignorer un formulaire spécifique, vous pouvez utiliser la directive ngNoForm qui empêchera ngForm d'être ajouté au formulaire

Référence: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

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.

Importez simplement le module correct,

"FormsModule"

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule //<---.
  ],
  ....
})

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();

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.