Błąd struktury kątowej TypeScript - „Brak dyrektywy z ustawieniem exportAs na ngForm”


226

Podczas korzystania z frameworku Angular2-form TypeScript nadal pojawia się ten błąd:

Nie ma opcji directive„ExportAs” ustawionej na „ngForm”

Oto mój kod

zależności projektu:

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

A to jest szablon logowania:

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

... i komponent logowania:

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

Mam ten błąd:

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

Odpowiedzi:


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

@NgModule({
  imports: [
             BrowserModule,

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

32
Zrobiłem to i nadal pojawia się błąd. Jakieś inne pomysły? (Jestem w wersji wydanej.)
David Pfeffer

30
To musi być związany z elementu <form>
pop

6
@pop Dzięki, dodałem go divi spowodował ten błąd.
Arg0n

1
Dzięki, ciągle zapominam, że to idzie do importstablicy, a nie do providerstablicy
TetraDev

9
mój problem rozwiązany przez dodanie ReactiveFormsModule w moim module.
Mohammad Mirzaeyan

50

Musisz zaimportować FormsModulenie tylko do głównego modułu AppModule, ale także do każdego podmodułu, który korzysta z dyrektyw dotyczących form kątowych.

// SubModule A

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule      //<----------make sure you have added this.
  ],
  ....
})

1
Możesz dodać do tablicy eksportu, wtedy nie będziesz musiał dodawać jej do importu wielu podmodułów
Samih A

@SamihA Proszę wyjaśnić na przykładzie, czy tablica eksportu jest w AppModule lub Submodule A?
TetraDev

Nie zapomnij również zaimportować ReactiveFormsModule
Snedden27

Pracowałem dla mnie - ale stwierdziłem, że nie usunął błędu, dopóki nie zabiłem npm i ponownie uruchomiłem start npm.
Dovev Hefetz

45

Wiem, że to Stary post, ale chciałbym podzielić się moim rozwiązaniem. Dodałem „ ReactiveFormsModule ” w tablicy importu [], aby rozwiązać ten błąd

Błąd: Nie ma dyrektywy z ustawieniem „exportAs” na „ngForm” („

Naprawić:

module.ts

import {FormsModule, ReactiveFormsModule } z „@ angular / form”

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

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

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

4
Zrobiłem to i nadal pojawia się błąd. Jakieś inne pomysły? (Jestem w wersji wydanej.)
David Pfeffer

16
Czy kiedykolwiek to rozgryzłeś? Mając ten sam błąd i mam również zaimportowany moduł FormsModule.
Josh

8

(Na wypadek, gdyby ktoś inny był ślepy jak ja) form FTW ! Pamiętaj, aby użyć <form>tagu

nie będzie działać:

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

działa jak urok:

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

6

W przypadku przypisania nazwy w ten sposób:

#editForm="testForm"

... eksportAs musi być zdefiniowany w dekoratorze komponentów:

selector: 'test-form',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.scss'],
exportAs: 'testForm'

działało to dla mnie, gdy zaakceptowane rozwiązanie nie.
ir0h

potwierdzając, że jest to coś, co należy zrobić oprócz przyjętego rozwiązania
hello_earth

5

sprawdź, czy importujesz FormsModule. Nie ma ngControl w nowej wersji wersji Angular 2 Release. musisz zmienić szablon na przykład

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

3

Dwie rzeczy, na które musisz dbać ...

  1. Jeśli używasz podmodułu, musisz zaimportować moduł FormModule do tego podmodułu.

            **imports:[CommonModule,HttpModule,FormsModule]**
  2. musisz wyeksportować moduł FormModule do modułu

        **exports:[FormsModule],**

    więc razem wygląda to na import: [CommonModule, HttpModule, FormsModule], eksport: [FormsModule],

  3. na górze musisz zaimportować moduł FormsModule

    import {FormsModule} z '@ angular / form';


jeśli używasz tylko app.module.ts, to

nie trzeba eksportować. Wymagany tylko import


1
Jeśli używasz FormsModule we własnym module, potrzebujesz następujących rzeczy w swoim xxxx.modules.ts. Importuj formularze z Angulara: import { FormsModule } from '@angular/forms'; dodaj go do tablicy importu NgModule: @NgModule({ imports: [ FormsModule ],
Koen van der Linden


2

Oprócz zaimportowania modułu formularza do pliku ts komponentu logowania musisz również zaimportować NgForm.

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

To rozwiązało mój problem


Dostałem ten błąd: Nieprzechwycony błąd: Nieoczekiwana dyrektywa „NgForm” zaimportowana przez moduł
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*/,...
],

w app.module.ts, aby trwale rozwiązać błędy takie jak "cannot bind [formGroup] or no directive with export as".



1

Ciągle powtarzam to samo pytanie, również z tego samego powodu. Więc pozwól mi odpowiedzieć na to, mówiąc, co złego robiłem. Może być komuś pomocny.

Tworzyłem komponent za angular-clipomocą polecenia

ng komponentów gc / coś / coś

To, co zrobiło, stworzyło komponent tak, jak chciałem.

Ponadto, podczas tworzenia komponentu, dodał komponent do tablicy deklaracji modułu aplikacji .

W takim przypadku usuń go. I Voila! To może zadziałać.


0

Musisz zaimportować moduł FormsModule, a następnie umieścić go w sekcji importowania.

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

0

Proste, jeśli nie importujesz modułu, a następnie zaimportuj i zadeklaruj import {FormsModule} z '@ angular / form';

a jeśli tak, wystarczy usunąć formControlName ='okolwiek ' z pól wejściowych.


0

Powinieneś zakończyć aplikację za pomocą Ctrl + C i uruchomić ją ponownie z ng serwerem, jeśli nie włączyłeś FormsModule do tablicy importu plików app.module, a następnie dodałeś ją później, Angular nie wie o tym, nie skanuje ponownie modułów , należy ponownie uruchomić aplikację, aby kątowy mógł zobaczyć, że nowy moduł jest uwzględniony, po czym obejmie wszystkie funkcje podejścia do szablonu



0

Właśnie przeniosłem moduły routingu, tj. Powiedzmy ARoutingModule powyżej FormsModule i ReactiveFormsModule oraz po CommonModule w tablicy importów modułów.


0

Wystarczy zaimportować odpowiedni moduł,

„FormsModule”

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

0

Ten błąd występuje również, jeśli próbujesz napisać jednostkowy przypadek testowy za pomocą jaśminu.

Podstawową koncepcją tego błędu jest import FormsModule. Dlatego w pliku testów jednostkowych dodajemy sekcję importu i umieszczamy FormsModule w tym pliku pod

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

-3

Miałem ten sam problem i rozwiązałem go, aktualizując wszystkie zależności (pakiet.json) za pomocą następującego polecenia npm update -D && npm update -S

Jak zauważył @ Günter Zöchbauer, pamiętaj, aby najpierw dołączyć moduł FormsModule.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.