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

在使用TypeScript的Angular2-forms框架时，我一直得到这个错误:

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

当前回答

你应该用ctrl+c终止app，然后用ng serve重新运行它，如果你没有将FormsModule包含到你的app.module文件导入数组中，然后再添加它，angular不会知道它，它不会重新扫描模块，你应该重新启动app，这样angular就可以看到新模块被包含了，之后它将包含模板驱动方法的所有功能

2019-06-06 10:45:54

其他回答

另一项检查:

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

@NgModule({
declarations: [
    YourComponent,
],

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

2020-12-18 02:04:08

你必须关心的三件事:

如果你正在使用子模块，你必须导入该子模块中的FormModule: 导入:[CommonModule, HttpModule, FormsModule] 你必须在模块中导出FormModule: 出口(FormsModule): 所以加起来是这样的: 导入:[CommonModule, HttpModule, FormsModule]，出口:[FormsModule], 在文件的顶部，你必须导入FormsModule: import {FormsModule} from '@angular/forms';

如果你只使用app.module.ts，那么不需要导出。只需要导入。

2018-01-30 11:07:29

同意@micronyks提供的解决方案，但如果你有一个简单的应用程序，其中没有很多模块，这是正确的。否则，我们需要以类似的方式添加模块，我们使用<form #loginForm="ngForm">元素，并在该模块中添加以下代码，如果你不想将其暴露给所有模块或整个应用程序。

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

2021-06-17 12:15:37

如果你已经将FormsModule导入并添加到将要使用的子模块中，并且仍然面临错误，

1. 你可能错过了添加根模块AppModule。(很傻，但有时会发生) 2. 确保你已经添加了相关的包，并在systemjs.config.js中引用了它

2022-07-13 21:55:49

This

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

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

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

2020-04-01 17:31:16

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

推荐文章

最新文章

标签