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

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

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

@NgModule({
  imports: [
             BrowserModule,

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

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

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

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

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

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

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'

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

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

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

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

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

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.

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

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

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 .

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

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/

Dies

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

Verursacht auch den Fehler und kann durch Einfügen der ngForm-Direktive behoben werden .

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

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

Importieren Sie einfach das richtige Modul.

"FormsModule"

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

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

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

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.