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

当前回答

This

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

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

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

2020-04-01 17:31:16

其他回答

我一遍又一遍地问同样的问题，也是出于同样的原因。我来回答一下我做错了什么。可能对某人有帮助。

我通过angular-cli命令创建组件

Ng g c components/something/something

它所做的，是创建我想要的组件。

此外，在创建组件时，它将该组件添加到App模块的declarations数组中。

如果是这种情况，请将其移除。瞧!它可能会起作用。

2020-04-21 16:46:11

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

2017-09-27 08:21:42

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

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

2022-01-04 10:22:03

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

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

这解决了我的问题

2018-03-21 08:08:07

你不仅要将FormsModule导入到根模块AppModule中，还要导入到所有使用angular forms指令的子模块中。

// SubModule A

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule      //<----------make sure you have added this.
  ],
  ....
})

2017-08-09 21:35:09

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

推荐文章

最新文章

标签