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

当前回答

我已经在imports[]数组中添加了ReactiveFormsModule来解决这个错误。

错误:没有将"exportAs"设置为"ngForm" ("

Fix:

module.ts:

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

imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

2018-01-31 19:27:48

其他回答

.HTML文件<form (ngSubmit)="addIngredients(f)"# f = " ngForm " > .ts文件@ViewChild('f'， {static: false})

在HTML中更新ngForm到ngForm对我有用

2022-01-04 10:22:03

在你的app.module.ts中

确保,

导入FormsModule 声明中的SampleComponent

2023-01-18 00:07:19

如果你已经导入了FormsModule，那么你只需要从输入字段中删除formControlName='whatever'。

2019-05-20 09:54:08

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

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

2016-09-18 15:24:48

如果一个名称是这样分配的:

#editForm="testForm"

．.． exportAs必须在组件装饰器中定义:

selector: 'test-form',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.scss'],
exportAs: 'testForm'

2019-11-28 16:27:32

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

推荐文章

最新文章

标签