Ich erhalte immer wieder diesen Fehler, wenn ich das Angular2-Forms-Framework von TypeScript verwende:
Es gibt keine
directive
mit "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)">
angular
typescript
forms
angular2-forms
Nassim MOUALEK
quelle
quelle
div
und es hat diesen Fehler verursacht.imports
Array und nicht improviders
ArraySie müssen
FormsModule
nicht nur in das Root-AppModule importieren, sondern auch in jedes SubModule , das Direktiven für Winkelformulare verwendet.quelle
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
quelle
quelle
(Nur für den Fall, dass jemand anders blind ist wie ich)
form
FTW ! Stellen Sie sicher, dass Sie das<form>
Tag verwendenwird nicht funktionieren:
funktioniert wie Charme:
quelle
Falls ein Name wie folgt vergeben wird:
... die exportAs müssen im Komponentendekorator definiert werden:
quelle
Ü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
quelle
Zwei Dinge, die Sie beachten müssen ..
Wenn Sie das Untermodul verwenden, müssen Sie das FormModule in dieses Untermodul importieren.
Sie müssen das FormModule im Modul exportieren
zusammen sieht es also aus wie Importe: [CommonModule, HttpModule, FormsModule], Exporte: [FormsModule],
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
quelle
import { FormsModule } from '@angular/forms';
importieren : Zum Import-Array hinzufügen NgModule:@NgModule({ imports: [ FormsModule ],
Ich war mit diesem Problem konfrontiert, aber keine der Antworten hier hat für mich funktioniert. Ich habe gegoogelt und das gefunden
FormsModule 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
quelle
Zusätzlich zum Importieren des Formularmoduls in die ts-Datei der Anmeldekomponente müssen Sie auch NgForm importieren.
Dies löste mein Problem
quelle
in app.module.ts, um Fehler wie dauerhaft zu lösen
"cannot bind [formGroup] or no directive with export as"
.quelle
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-cli
Befehl erstelltWas 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.
quelle
Sie müssen das FormsModule importieren und dann im Abschnitt "Importe" platzieren.
quelle
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 .
quelle
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
quelle
In meinem Fall musste ich das
ngNoForm
Attribut aus meinem<form>
Tag entfernen .Referenz: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/
quelle
Dies
Verursacht auch den Fehler und kann durch Einfügen der ngForm-Direktive behoben werden .
quelle
Ich habe gerade Routing-Module verschoben, dh ARoutingModule über FormsModule und ReactiveFormsModule und nach CommonModule in ein Array von Modulen importiert.
quelle
Importieren Sie einfach das richtige Modul.
"FormsModule"
quelle
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 unterquelle
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.
quelle