Angular Framework-Fehler von TypeScript - "Es gibt keine Direktive, bei der exportAs auf ngForm gesetzt ist."

224

Ich erhalte immer wieder diesen Fehler, wenn ich das Angular2-Forms-Framework von TypeScript verwende:

Es gibt keine directivemit "exportAs" auf "ngForm" gesetzt.

Hier ist mein Code

Projektabhängigkeiten:

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

Und das ist die Login-Vorlage:

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

... und die Login-Komponente:

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

Ich habe diesen Fehler:

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)">
Nassim MOUALEK
quelle

Antworten:

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

@NgModule({
  imports: [
             BrowserModule,

             FormsModule      //<----------make sure you have added this.
           ],
  ....
})
Mikronyken
quelle
32
Ich habe das getan und bekomme immer noch den Fehler. Irgendwelche anderen Ideen? (Ich bin auf der Release-Version.)
David Pfeffer
30
Es muss an <form> element gebunden sein
pop
6
@pop Danke, habe es hinzugefügt divund es hat diesen Fehler verursacht.
Arg0n
1
Danke, ich vergesse immer wieder, dass dies im importsArray und nicht im providersArray
geschieht
9
Mein Problem wurde durch Hinzufügen von ReactiveFormsModule in meinem Modul gelöst.
Mohammad Mirzaeyan
50

Sie müssen FormsModulenicht nur in das Root-AppModule importieren, sondern auch in jedes SubModule , das Direktiven für Winkelformulare verwendet.

// SubModule A

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule      //<----------make sure you have added this.
  ],
  ....
})
TetraDev
quelle
1
Sie können zum Export-Array hinzufügen, dann müssen Sie es nicht zu mehreren Submodul-Importen hinzufügen
Samih A
@SamihA Bitte erläutern Sie anhand eines Beispiels, ob das Export-Array in AppModule oder Submodule A?
TetraDev
Vergessen Sie auch nicht, ReactiveFormsModule
Snedden27
Hat für mich funktioniert - aber ich habe festgestellt, dass der Fehler erst behoben wurde, als ich npm beendet und den Start von npm erneut ausgeführt habe.
Dovev Hefetz
45

Ich weiß, dass dies ein alter Beitrag ist, aber ich möchte meine Lösung teilen. Ich habe " ReactiveFormsModule " im Array imports [] hinzugefügt , um diesen Fehler zu beheben

Fehler: Es gibt keine Direktive mit "exportAs" auf "ngForm" ("

Fix:

module.ts

{FormsModule, ReactiveFormsModule } aus '@ angle / forms' importieren

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

@NgModule({
  imports: [FormsModule],
  ...
})
Günter Zöchbauer
quelle
4
Ich habe das getan und bekomme immer noch den Fehler. Irgendwelche anderen Ideen? (Ich bin auf der Release-Version.)
David Pfeffer
16
Hast du das jemals herausgefunden? Ich habe den gleichen Fehler und habe auch FormsModule importiert.
Josh
8

(Nur für den Fall, dass jemand anders blind ist wie ich) form FTW ! Stellen Sie sicher, dass Sie das <form>Tag verwenden

wird nicht funktionieren:

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

funktioniert wie 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>
Sieben
quelle
6

Falls ein Name wie folgt vergeben wird:

#editForm="testForm"

... die exportAs müssen im Komponentendekorator definiert werden:

selector: 'test-form',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.scss'],
exportAs: 'testForm'
Nadine
quelle
Dies funktionierte für mich, als die akzeptierte Lösung nicht funktionierte.
5.
Bestätigung, dass dies etwas ist, das neben der akzeptierten Lösung getan werden muss
hallo_earth
5

Überprüfen Sie, ob Sie FormsModule importieren. In der neuen Version von Angular 2 gibt es kein ngControl. Sie müssen Ihre Vorlage als Beispiel ändern

<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>
Md Ayub Ali Sarker
quelle
3

Zwei Dinge, die Sie beachten müssen ..

  1. Wenn Sie das Untermodul verwenden, müssen Sie das FormModule in dieses Untermodul importieren.

            **imports:[CommonModule,HttpModule,FormsModule]**
  2. Sie müssen das FormModule im Modul exportieren

        **exports:[FormsModule],**

    zusammen sieht es also aus wie Importe: [CommonModule, HttpModule, FormsModule], Exporte: [FormsModule],

  3. In Top u müssen Sie das FormsModule importieren

    {FormsModule} aus '@ angle / forms' importieren;


Wenn Sie nur die Datei app.module.ts verwenden, dann

Keine Notwendigkeit zu exportieren .. nur Import erforderlich

Shajahan
quelle
1
Wenn Sie FormsModule in Ihrem eigenen Modul verwenden, benötigen Sie Folgendes in Ihrer xxxx.modules.ts. Formulare aus Angular import { FormsModule } from '@angular/forms'; importieren : Zum Import-Array hinzufügen NgModule: @NgModule({ imports: [ FormsModule ],
Koen van der Linden
2

Ich war mit diesem Problem konfrontiert, aber keine der Antworten hier hat für mich funktioniert. Ich habe gegoogelt und das gefundenFormsModule not shared with Feature Modules

Wenn sich Ihr Formular in einem vorgestellten Modul befindet, müssen Sie es dort importieren und hinzufügen FromsModule.

Bitte beachten Sie: https://github.com/angular/angular/issues/11365

Prasanth Bendra
quelle
2

Zusätzlich zum Importieren des Formularmoduls in die ts-Datei der Anmeldekomponente müssen Sie auch NgForm importieren.

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

Dies löste mein Problem

Jo Paul
quelle
Ich habe diesen Fehler erhalten: Nicht gefangener Fehler: Unerwartete Direktive 'NgForm', die vom Modul importiert wurde
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*/,...
],

in app.module.ts, um Fehler wie dauerhaft zu lösen "cannot bind [formGroup] or no directive with export as".

Ishan
quelle
1

Ich bin immer wieder auf dieselbe Frage gekommen, auch aus demselben Grund. Lassen Sie mich dies beantworten, indem Sie sagen, was ich falsch gemacht habe. Könnte für jemanden hilfreich sein.

Ich habe eine Komponente über einen angular-cliBefehl erstellt

ng gc Komponenten / etwas / etwas

Was es tat, wurde die Komponente erstellt, wie ich wollte.

Außerdem wurde beim Erstellen der Komponente die Komponente zum Deklarationsarray des App-Moduls hinzugefügt .

Wenn dies der Fall ist, entfernen Sie es bitte. Und Voila! Es könnte klappen.

HV Sharma
quelle
0

Sie müssen das FormsModule importieren und dann im Abschnitt "Importe" platzieren.

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

Einfach, wenn Sie kein Modul importiert haben, importieren und deklarieren Sie den Import {FormsModule} von '@ angle / forms';

und wenn Sie dies getan haben, müssen Sie nur formControlName = 'was auch immer' aus den Eingabefeldern entfernen .

Hasnain Ali Sohrani
quelle
0

Sie sollten die App mit Strg + C beenden und mit ng Serve erneut ausführen. Wenn Sie FormsModule nicht in das Array für den Import von app.module-Dateien aufgenommen und später hinzugefügt haben, weiß Angular es nicht und die Module werden nicht erneut gescannt sollten Sie die App neu starten, damit Angular sehen kann, dass ein neues Modul enthalten ist, nachdem alle Funktionen des Template-Drive-Ansatzes enthalten sind

Artur O.
quelle
0

In meinem Fall musste ich das ngNoFormAttribut aus meinem <form>Tag entfernen .

Wenn Sie FormsModule in Ihre Anwendung importieren möchten, aber ein bestimmtes Formular überspringen möchten, können Sie die Direktive ngNoForm verwenden, die verhindert, dass ngForm zum Formular hinzugefügt wird

Referenz: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

Michael
quelle
0

Ich habe gerade Routing-Module verschoben, dh ARoutingModule über FormsModule und ReactiveFormsModule und nach CommonModule in ein Array von Modulen importiert.

ProgIn
quelle
0

Importieren Sie einfach das richtige Modul.

"FormsModule"

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

Dieser Fehler tritt auch auf, wenn Sie versuchen, einen Einheitentestfall mit Jasmin im Winkel zu schreiben.

Das Grundkonzept dieses Fehlers ist zu import FormsModule. Daher fügen wir in der Datei für Komponententests den Abschnitt "Importe" hinzu und platzieren FormsModule in dieser Datei unter

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

Ich hatte das gleiche Problem und löste es, indem ich alle Abhängigkeiten (package.json) mit dem folgenden Befehl aktualisierte npm update -D && npm update -S

Wie @ Günter Zöchbauer betonte, sollten Sie zuerst das FormsModule einfügen.

Fzum
quelle