Нет директивы с параметром "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)">

Ответ 1

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

@NgModule({
  imports: [
             BrowserModule,

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

Ответ 2

Вам нужно импортировать FormsModule не только в корневой AppModule, , но и в каждый subModule, который использует любые директивы форм angular.

// SubModule A

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

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

Ответ 3

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

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

Fix:

module.ts

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

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

Ответ 4

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

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

Ответ 5

(На всякий случай кто-то слепой, как я) 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

проверьте, импортируете ли вы 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>

Ответ 7

Две вещи, которые вы должны заботиться..

Если вы используете субмодуль, вы должны импортировать FormModule в этот субмодуль.
```
        **imports:[CommonModule,HttpModule,FormsModule]**
```
Вы должны экспортировать FormModule в модуль
```
    **exports:[FormsModule],**
```
поэтому вместе это выглядит как импорт: [CommonModule, HttpModule, FormsModule], экспорт: [FormsModule],
в верхней части вы должны импортировать FormsModule

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

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

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

Ответ 8

Я столкнулся с этой проблемой, но ни один из ответов здесь не работал у меня. Я googled и обнаружил, что FormsModule not shared with Feature Modules

Итак, если ваша форма находится в функциональном модуле, вам нужно импортировать и добавить FromsModule там.

Пожалуйста, напишите: https://github.com/angular/angular/issues/11365

Ответ 9

В дополнение к импорту модуля формы в файл ts компонента входа необходимо также импортировать NgForm.

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

Это решило мою проблему

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

Вы должны завершить приложение с помощью Ctrl + C и повторно запустить его с помощью NG serve

Ответ 13

У меня была такая же проблема и я решил ее обновить все зависимости (package.json) следующей командой npm update -D && npm update -S

Как указал @Günter Zöchbauer, сначала включите FormsModule.