"exportAs"设置为"ngForm"没有指令

Question

拥有此项目依赖项:

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

Answer 1

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

@NgModule({
  imports: [
             BrowserModule,

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

Answer 2

您不仅要导入FormsModule根AppModule,还要导入到使用任何角形式指令的每个子模块中.

// SubModule A

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

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

Answer 3

我知道这是一个老帖子,但我想分享我的解决方案.我在imports []数组中添加了" ReactiveFormsModule " 来解决此错误

错误:没有将"exportAs"设置为"ngForm"的指令("

固定:

module.ts

从'@ angular/forms' 导入{FormsModule,ReactiveFormsModule }

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

Answer 4

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

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

Answer 5

这

<div #myForm="ngForm"></div>

也会导致错误，可以通过包含ngForm 指令来修复。

<div ngForm #myForm="ngForm"></div>

Answer 6

如果名称是这样分配的：

#editForm="testForm"

... exportAs 必须在组件装饰器中定义：

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

Answer 7

另一项检查：

确保您的组件已添加到 app.module.ts 中 @NgModule 的声明数组中

@NgModule({
declarations: [
    YourComponent,
],

运行该ng generate component命令时，它不会自动将其添加到 app.module 中。

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

Answer 9

你必须关心三件事：

1. 如果您使用子模块，则必须FormModule在该子模块中导入：

   imports:[CommonModule, HttpModule, FormsModule]
   

2. 您必须FormModule在模块中导出：

   exports:[FormsModule]
   

   所以在一起看起来像：

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

3. 在文件顶部，您必须导入FormsModule：

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

如果您仅使用app.module.ts则无需导出。只需要导入即可。

Answer 10

检查是否导入FormsModule.新形式的角度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>

Answer 11

除了在登录组件 ts 文件中导入表单模块之外，还需要导入 NgForm。

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

这解决了我的问题