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

当前回答

检查是否导入了FormsModule。在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>

2016-10-25 20:03:55

其他回答

如果你试图使用jasmine在angular中编写单元测试用例，也会出现这个错误。

这个错误的基本概念是导入FormsModule。因此，在用于单元测试的文件中，我们添加了imports Section，并将FormsModule放在该文件的下面

    TestBed.configureTestingModule
    For eg: 
    TestBed.configureTestingModule({
        declarations: [ XYZComponent ],
        **imports: [FormsModule]**,
    }).compileComponents();

2020-05-09 16:30:00

几乎所有的答案都在谈论添加FormsModule模块，但在我的例子中，导入已经完成。正如在回答问题时所说，你必须关闭并重新启动VScode，或者在我的情况下，你必须保存你的工作空间，“save workspace As…”，一切都将正常工作。

2021-09-05 18:28:46

我只是移动路由模块，即说ARoutingModule上面的FormsModule和ReactiveFormsModule和CommonModule之后的导入模块数组。

2020-04-11 14:25:13

在你的app.module.ts中

确保,

导入FormsModule 声明中的SampleComponent

2023-01-18 00:07:19

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

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

这解决了我的问题

2018-03-21 08:08:07

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

推荐文章

最新文章

标签