Помилка Angular Framework TypeScript-- - "Не існує директиви з ExportAs, встановленими на ngForm"


226

Я продовжую отримувати цю помилку під час використання рамки TypeScript Angular2-форм:

Немає параметра directive"exportAs", встановленого на "ngForm"

Ось мій код

залежність від проекту:

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

А це шаблон для входу:

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

... і компонент для входу:

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

У мене є ця помилка:

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

Відповіді:


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

@NgModule({
  imports: [
             BrowserModule,

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

32
Я це зробив, і я все ще отримую помилку. Будь-які інші ідеї? (Я над версією релізу.)
David Pfeffer

30
Він повинен бути прив'язаний до <form> елемента
поп

6
@pop Спасибі, додав його до divі це спричинило цю помилку.
Arg0n

1
Дякую, я постійно забуваю, що це йде в importsмасиві, а не в providersмасиві
TetraDev

9
мою проблему вирішено з додаванням ReactiveFormsModule в мій модуль.
Мохаммед Мірзаеян

50

Вам потрібно імпортувати FormsModuleне тільки в кореневий AppModule, а й у кожен підмодуль, який використовує будь-які директиви щодо кутових форм.

// SubModule A

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

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

1
Ви можете додати до експорту масив, тоді вам не потрібно буде додавати його до імпорту декількох підмодулів
Samih A

@SamihA Поясніть, наприклад, експортний масив йде у AppModule або Submodule A?
TetraDev

Також не забудьте імпортувати ReactiveFormsModule
Snedden27,

Працював для мене - але я виявив, що помилка не очистила, поки я не вбив npm і reran npm run start.
Довєв Гефец

45

Я знаю, що це старий пост, але я хотів би поділитися своїм рішенням. Я додав " ReactiveFormsModule " в масив import [], щоб вирішити цю помилку

Помилка. Немає директиви з "exportAs", встановленою на "ngForm" ("

Виправити:

module.ts

імпорт {FormsModule, ReactiveFormsModule } з "@ angular / форми"

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

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

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

4
Я це зробив, і я все ще отримую помилку. Будь-які інші ідеї? (Я над версією релізу.)
David Pfeffer

16
Ви коли-небудь це розуміли? З тією ж помилкою, і я імпортував FormsModule.
Джош

8

(Про всяк випадок, якщо хтось сліпий, як я) form FTW ! Обов’язково використовуйте <form>тег

звичайна робота:

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

працює як шарм:

 <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

У випадку, якщо ім’я призначено так:

#editForm="testForm"

... exportAs має бути визначено в декораторі компонентів:

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

це працювало для мене, коли прийняте рішення не робило.
ir0h

підтверджуючи, що це щось, що потрібно зробити, окрім прийнятого рішення
hello_earth

5

перевірте, чи імпортуєте ви FormsModule. У нових формах ngControl у новій формі кутової версії 2 немає. ви повинні змінити шаблон на приклад

<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

Дві речі, про які ти повинен дбати ..

  1. Якщо ви використовуєте підмодуль, вам потрібно імпортувати FormModule в цей підмодуль.

            **imports:[CommonModule,HttpModule,FormsModule]**
  2. ви повинні експортувати FormModule в модуль

        **exports:[FormsModule],**

    тому разом це виглядає як імпорт: [CommonModule, HttpModule, FormsModule], експорт: [FormsModule],

  3. вгорі вам доведеться імпортувати FormsModule

    імпорт {FormsModule} з '@ angular / form';


якщо ви використовуєте лише app.module.ts, тоді

не потрібно експортувати .. потрібен лише імпорт


1
Якщо ви використовуєте FormsModule у власному модулі, вам знадобиться наступне у вашому xxxx.modules.ts. Форми імпорту з кутових: import { FormsModule } from '@angular/forms'; додайте його до масиву імпорту NgModule: @NgModule({ imports: [ FormsModule ],
Koen van der Linden

2

Я зіткнувся з цим питанням, але жодна з відповідей тут не працювала на мене. Я гуглив і знайшов цеFormsModule not shared with Feature Modules

Отже, якщо ваша форма є в пропонованому модулі, вам доведеться імпортувати та додавати FromsModuleтуди.

Будь ласка, зателефонуйте: https://github.com/angular/angular/isissue/11365


2

Окрім імпорту модуля форми у файл компонента для входу, потрібно також імпортувати NgForm.

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

Це вирішило мою проблему


Я отримав цю помилку: Uncaught Error: Несподівана директива 'NgForm', імпортована модулем
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*/,...
],

в app.module.ts для постійного вирішення таких помилок "cannot bind [formGroup] or no directive with export as".



1

До цього ж питання я приходив знову і знову, також із тієї ж причини. Тож дозвольте мені відповісти на це, сказавши, що я неправильно робив. Можливо, хтось буде корисним.

Я створював компонент через angular-cliкоманду

ng gc компоненти / щось / щось

Що це робилося, було створено компонент, як я хотів.

Також, створюючи компонент, він додав компонент у масив декларацій модуля додатка .

Якщо це так, видаліть його. І Вуаля! Це може спрацювати.


0

Ви повинні імпортувати FormsModule, а потім розмістити його у розділі імпорту.

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

0

Простий, якщо ви не імпортуєте модуль, тоді імпортуйте та декларуйте імпорт {FormsModule} з '@ angular / form';

і якщо ви це зробили, то вам просто потрібно видалити formControlName = 'що-небудь' з полів введення.


0

Вам слід припинити додаток ctrl + c і повторно запустити його з ng serve, якщо ви не включили FormsModule у свій файл імпорту файлів app.module, а потім додали його пізніше, angular не знає цього, він не сканує повторно модулі , ви повинні перезапустити додаток, щоб кутовий міг бачити, що новий модуль включений, після чого він буде включати всі функції підходу шаблону


0

У моєму випадку мені довелося видалити ngNoFormатрибут зі свого <form>тегу.

Якщо ви хочете імпортувати FormsModule у свою програму, але хочете пропустити певну форму, ви можете скористатися директивою ngNoForm, яка запобіжить доданню ngForm до форми

Довідка: https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/


0

Я щойно перемістив модулі маршрутизації, тобто скажу ARoutingModule над FormsModule та ReactiveFormsModule та після CommonModule в імпортному масиві модулів.


0

Просто імпортуйте правильний модуль,

"FormsModule"

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

0

Ця помилка також виникає, якщо ви намагаєтеся написати тестовий випадок у кутку за допомогою жасмину.

Основна концепція цієї помилки - це import FormsModule. Таким чином, у файл для одиничних тестів ми додаємо розділ імпорту та розміщуємо FormsModule в цьому файлі під

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

-3

У мене була така ж проблема і вирішено її, оновивши всі залежності (package.json) за допомогою наступної команди npm update -D && npm update -S

Як зазначав @ Günter Zöchbauer, спочатку обов'язково включіть FormsModule.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.