Ошибка Angular Framework в TypeScript - «Нет директивы с exportAs, установленным в ngForm»


226

Я продолжаю получать эту ошибку при использовании фреймворка Angular2-формы TypeScript:

Нет 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
Я сделал это, и я все еще получаю ошибку. Есть другие идеи? (Я нахожусь в версии выпуска.)
Дэвид Пфеффер

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
Вы можете добавить массив экспорта, тогда вам не нужно будет добавлять его в несколько подмодулей импорта
Самих,

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

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

Сработало для меня - но я обнаружил, что ошибка не исчезла, пока я не убил npm и не перезапустил npm run start
Довев Хефец

45

Я знаю, что это старый пост, но я хотел бы поделиться своим решением. Я добавил " ReactiveFormsModule " в массиве import [], чтобы устранить эту ошибку

Ошибка: нет директивы с "exportAs", установленным в "ngForm" ("

Fix:

module.ts

import {FormsModule, ReactiveFormsModule } из '@ angular / forms'

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

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

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

4
Я сделал это, и я все еще получаю ошибку. Есть другие идеи? (Я нахожусь в версии выпуска.)
Дэвид Пфеффер

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. В новой версии angular 2 нет версии ngControl. Вы должны изменить свой шаблон в качестве примера

<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

    import {FormsModule} из '@ angular / forms';


если вы используете только app.module.ts, то

не нужно экспортировать .. требуется только импорт


1
Если вы используете FormsModule в своем собственном модуле, вам нужно следующее в xxxx.modules.ts. Импорт форм из Angular: 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/issues/11365


2

В дополнение к импорту модуля формы в файл ts компонента входа необходимо также импортировать 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команды

нг компоненты gc / что-то / что-то

Что было сделано, был создан компонент, как я и хотел.

Кроме того, при создании компонента он добавил компонент в массив объявлений модуля приложения .

Если это так, пожалуйста, удалите его. И вуаля! Это может сработать.


0

Вы должны импортировать FormsModule и затем поместить его в раздел импорта.

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

0

Просто, если у вас нет модуля импорта, тогда импортируйте и объявляйте import {FormsModule} из '@ angular / forms';

и если вы это сделали, то вам просто нужно удалить formControlName = 'what' из полей ввода.


0

Вы должны завершить приложение с помощью ctrl + c и повторно запустить его с помощью ng serve, если вы не включили FormsModule в свой массив импорта файлов app.module, а затем добавили его позже, angular не знает об этом, он не пересматривает модули , вы должны перезапустить приложение, чтобы 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.