TypeScript 的 Angular 框架错误 - “没有将 exportAs 设置为 ngForm 的指令”

Question

在使用 TypeScript 的 Angular2-forms 框架时，我不断收到此错误：

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

原文由 Nassim MOUALEK 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

@NgModule({
  imports: [
             BrowserModule,

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

原文由 micronyks 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您已经将 FormsModule 导入并添加到您要使用的子模块中， 但仍然遇到错误，

1.添加根AppModule可能会错过。 （愚蠢但有时会发生） 2.确保您已添加相关包并在systemjs.config.js中引用它

原文由 Thishan Dharmakeerthi 发布，翻译遵循 CC BY-SA 4.0 许可协议