“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，然后将其放在导入部分中。

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

Answer 3

如果您没有导入模块，那么很简单，然后从'@ angular / forms'导入并声明import {FormsModule};

如果你这样做，你只需要从输入字段中删除formControlName ='whatever'。

Answer 4

您应该使用ctrl + c终止应用程序并使用ng服务重新运行它，如果您没有将FormsModule包含到app.module文件中导入数组，然后稍后添加它，angular不知道它，它不会重新扫描模块，您应该重新启动应用程序，以便角度可以看到包含新模块，之后它将包含模板驱动器方法的所有功能

Answer 5

我遇到了同样的问题并通过使用以下命令npm update -D && npm update -S更新所有依赖项（package.json）来解决它

正如@GünterZöchbauer指出的那样，请务必先包含FormsModule。

Answer 6

您必须将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 7

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

错误：没有将“exportAs”设置为“ngForm”的指令（“

固定：

module.ts

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

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

Answer 8

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

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

Answer 9

（以防其他人像我一样失明）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 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

我遇到了这个问题，但这里没有任何答案对我有用。我用Google搜索，发现FormsModule not shared with Feature Modules

因此，如果您的表单位于特色模块中，那么您必须导入并在那里添加FromsModule。

请参考：https://github.com/angular/angular/issues/11365

Answer 12

你需要关心的两件事......

1. 如果使用子模块，则必须在该子模块中导入FormModule。 **imports:[CommonModule,HttpModule,FormsModule]**
2. 你必须在模块中导出FormModule **exports:[FormsModule],** 所以它看起来像导入：[CommonModule，HttpModule，FormsModule]，导出：[FormsModule]，
3. 在顶部你必须导入FormsModule 从'@ angular / forms'导入{FormsModule};

---

如果你只使用app.module.ts那么

无需导出..只需要导入

Answer 13

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

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

这解决了我的问题