在使用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)">

当前回答

是的,我也遇到过同样的问题…我做了所有的事情,但没有工作。 这个解决了我的问题。因为我们在严格模式下使用了angular 'with'。

在app.module.ts中添加以下代码

import {FormsModule, ReactiveFormsModule} from '@angular/forms'

imports: [
    BrowserModule,
    FormsModule, 
    ReactiveFormsModule
],

以及使用NgForm的文件 在.html文件

<form #form="ngForm" (ngSubmit)="loginSubmit(form);">
</form>

在.ts文件中

import { NgForm } from '@angular/forms';
@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.scss']
})
export class LoginPageComponent implements OnInit {
  NgForm=NgForm;//this one solve my problem...initialization and declaration
}

其他回答

(以防别人也像我一样瞎) 形成增值!确保使用<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>

你必须关心的三件事:

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


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

在我的例子中,我忘记在app.module的声明数组中添加我的组件。Ts,瞧!这个问题已经解决了。

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

imports:[
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule/*This one in particular*/,...
],

在app.module.ts中永久解决诸如“无法绑定[formGroup]或没有export as指令”之类的错误。

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