Abhängigkeiten von diesem Projekt haben:
"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 diese Login-Vorlage:
<form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)">
</form>
Und diese 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)">
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule //<----------make sure you have added this.
],
....
})
Sie müssen FormsModule
nicht nur in das Root-AppModule importieren sondern auch in jedes SubModule, das beliebige angular Formularanweisungen verwendet.
// SubModule A
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule //<----------make sure you have added this.
],
....
})
Ich weiß, dass dies ein alter Beitrag ist, aber ich möchte meine Lösung teilen. Ich habe "ReactiveFormsModule" in Importe [] Array 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
],
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule],
...
})
(Nur für den Fall, dass jemand anderes 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>
überprüfen Sie, ob Sie FormsModule importieren. In der neuen Release-Version von Forms 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>
Ich war mit diesem Problem konfrontiert, aber keine der Antworten hier hat für mich funktioniert. Ich habe gegoogelt und festgestellt, dass FormsModule not shared with Feature Modules
Wenn sich Ihr Formular in einem vorgestellten Modul befindet, müssen Sie das FromsModule
dort importieren und hinzufügen.
Bitte lesen Sie: https://github.com/angular/angular/issues/11365
Zwei Dinge, die Sie kümmern müssen ..
Wenn Sie das Submodul verwenden, müssen Sie das FormModule in dieses Submodul importieren.
**imports:[CommonModule,HttpModule,FormsModule]**
sie müssen das FormModule im Modul exportieren
**exports:[FormsModule],**
zusammen sieht es also aus wie importiert: [CommonModule, HttpModule, FormsModule], exportiert: [FormsModule],
in Top müssen Sie das FormsModule importieren
{FormsModule} aus '@ angular/forms' importieren;
wenn Sie nur die app.module.ts dann verwenden
Sie müssen das FormsModule importieren und dann in den Importabschnitt einfügen.
import { FormsModule } from '@angular/forms';
Einfach, wenn Sie kein Modul importieren, importieren Sie und deklarieren Sie den Import {FormsModule} von '@ angular/forms';
und wenn ja, müssen Sie nur formControlName = 'whatever' aus den Eingabefeldern entfernen.
Sie sollten die App mit Strg + C beenden und sie mit ng serve erneut ausführen, wenn Sie FormsModule nicht in Ihr Array zum Importieren der Datei app.module aufgenommen haben. Fügen Sie es später hinzu, angular weiß es nicht Scannt keine Module erneut, sollten Sie die App neu starten, damit angular erkennt, dass ein neues Modul enthalten ist. Danach werden alle Funktionen von Template Drive Approach berücksichtigt
Zusätzlich zum Importieren des Formularmoduls in die Anmeldekomponentendatei müssen Sie auch NgForm importieren.
import { NgForm } from '@angular/forms';
Dies löste mein Problem