Там нет директивы с "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)">
10 112
angularjs angular2-forms

10 ответов:

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

@NgModule({
  imports: [
             BrowserModule,

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

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

// SubModule A

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

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

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

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

исправления:

модуль.ТС

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

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],
18
import { FormsModule }   from '@angular/forms';

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

проверьте, импортируете ли вы FormsModule. В новой версии forms 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>
5

(на всякий случай, если кто-то еще слепой, как я) formFTW! Обязательно используйте <form> tag

не работает:

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

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

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

пожалуйста ref:https://github.com/angular/angular/issues/11365

1

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

  1. Если вы используете подмодуль, вы должны импортировать FormModule в этом подмодуле.

            **imports:[CommonModule,HttpModule,FormsModule]**

  2. вы должны экспортировать FormModule в модуле

        **exports:[FormsModule],**

    Так что вместе это выглядит импорт:[CommonModule, HttpModule, FormsModule], экспорт:[FormsModule],

  3. в верхней части u должны импортировать FormsModule

    импорт {FormsModule} из '@angular / forms';

Если вы используете только приложение.модуль.тогда ТС

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

1

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

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

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

0

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

Как отметил @Günter Zöchbauer, сначала убедитесь, что вы включили FormsModule.

-2