web-dev-qa-db-de.com

Es gibt keine Direktive mit "exportAs" auf "ngForm"

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)">
182
Nassim MOUALEK
import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [
             BrowserModule,

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

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

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
  ],
37
Shakeer Hussain
import { FormsModule }   from '@angular/forms';

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

(Nur für den Fall, dass jemand anderes blind ist wie ich) formFTW! 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>
7
seven

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

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

2
Prasanth Bendra

Zwei Dinge, die Sie kümmern müssen ..

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

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

        **exports:[FormsModule],**
    

    zusammen sieht es also aus wie importiert: [CommonModule, HttpModule, FormsModule], exportiert: [FormsModule],

  3. in Top müssen Sie das FormsModule importieren

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


wenn Sie nur die app.module.ts dann verwenden

kein Export erforderlich. Nur Import erforderlich

2
shajahan

Sie müssen das FormsModule importieren und dann in den Importabschnitt einfügen.

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

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.

0

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

0
Artur O

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

0
Jo Paul