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

【问题标题】：TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"TypeScript-的 Angular 框架错误 - “没有将 exportAs 设置为 ngForm 的指令”
【发布时间】：2017-01-26 07:46:57
【问题描述】：

我在使用 TypeScript 的 Angular2-forms 框架时不断收到此错误：

没有将“exportAs”设置为“ngForm”的directive

这是我的代码

项目依赖：

  "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 typescript forms angular2-forms

【解决方案1】：

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

@NgModule({
  imports: [
             BrowserModule,

             FormsModule      //<----------make sure you have added this.
           ],
  ....
})

【讨论】：

我已经这样做了，但我仍然得到错误。还有其他想法吗？（我在发布版本。）
它必须绑定到
元素
@pop 谢谢，将其添加到div 并导致此错误。
谢谢，我一直忘记这是在 imports 数组中，而不是在 providers 数组中
在我的模块中添加 ReactiveFormsModule 解决了我的问题。

【解决方案2】：

您不仅必须将FormsModule 导入到根 AppModule，还必须导入使用任何角度形式指令的每个子模块。

// SubModule A

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

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

【讨论】：

您可以添加到导出数组中，然后您不需要将其添加到多个子模块导入中
@SamihA 请举例说明，导出数组放在 AppModule 还是 Submodule A 中？
另外别忘了导入 ReactiveFormsModule
为我工作 - 但我发现它没有清除错误，直到我杀死 npm 并重新运行 npm run start。

【解决方案3】：

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

错误：没有将“exportAs”设置为“ngForm”的指令（“

修复：

module.ts:

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

imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

【讨论】：

谢谢，添加“ReactiveFormsModule”后解决了......
还要注意，除了 FormsModule 导入之外，还声明了使用该指令的组件（在 NgModule 的声明属性中）

【解决方案4】：

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

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

【讨论】：

我已经这样做了，但我仍然得到错误。还有其他想法吗？（我在发布版本。）
你有没有想过这个问题？有同样的错误，我也导入了 FormsModule。

【解决方案5】：

（以防其他人像我一样失明） form FTW！确保使用<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>

【讨论】：

【解决方案6】：

如果一个名字是这样分配的：

#editForm="testForm"

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

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

【讨论】：

【解决方案7】：

检查您是否导入 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>

【讨论】：

【解决方案8】：

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

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

这解决了我的问题

【讨论】：

我收到此错误：未捕获错误：模块导入的意外指令“NgForm”
你对NgForm做了什么？？？将其添加到声明中？
是的，添加后在浏览器中可见..谢谢。

【解决方案9】：

这个

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

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

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

【讨论】：

【解决方案10】：

你必须关心的三件事：

如果您使用子模块，则必须在该子模块中导入FormModule：
```
imports:[CommonModule, HttpModule, FormsModule]
```

你必须在模块中导出FormModule：

exports:[FormsModule]

所以在一起看起来像：

imports:[CommonModule, HttpModule, FormsModule],
exports:[FormsModule],

在文件顶部你必须导入FormsModule:

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

如果您只使用app.module.ts，则无需导出。只需要导入。

【讨论】：

如果您在自己的模块中使用 FormsModule，您的 xxxx.modules.ts 中需要以下内容。从 Angular 导入表单：import { FormsModule } from '@angular/forms'; 将其添加到导入数组 NgModule：@NgModule({ imports: [ FormsModule ],

【解决方案11】：

我一遍又一遍地提出同样的问题，也是出于同样的原因。所以让我通过说我做错了什么来回答这个问题。可能对某人有帮助。

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

ng g c 组件/某物/某物

它所做的就是按照我的意愿创建组件。

此外，在创建组件时，它将组件添加到应用模块的声明数组中。

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

【讨论】：

【解决方案12】：

另一个项目检查：

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

@NgModule({
declarations: [
    YourComponent,
],

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

【讨论】：

【解决方案13】：

如果您尝试使用 jasmine 在 Angular 中编写单元测试用例，也会出现此错误。

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

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

【讨论】：

【解决方案14】：

在我的例子中，我忘记在 app.module.ts 的声明数组中添加我的组件，瞧！问题已解决。

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

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

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

在 app.module.ts 中永久解决 "cannot bind [formGroup] or no directive with export as" 等错误。

【讨论】：

【解决方案17】：

是的，我遇到了同样的问题……我做了最重要的事情，但没有奏效。这个解决了我的问题。因为我们在严格模式下使用 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
}

【讨论】：

【解决方案18】：

几乎所有答案都在谈论添加FormsModule 模块，但在我的情况下，导入已经完成。正如对问题的回答中所说，您必须关闭并重新启动 VScode，或者在我的情况下，您必须使用“将工作区另存为 ...”来保存您的工作区，一切都会再次正常工作。

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。
很好，但这也没有用。错误就在那里。谢谢

【解决方案19】：

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

【讨论】：

【解决方案20】：

就我而言，我必须从我的<form> 标记中删除ngNoForm 属性。

如果你想在你的应用程序中导入 FormsModule 但又想跳过一个特定的表单，你可以使用 ngNoForm 指令来阻止 ngForm 被添加到表单中

参考：https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

【讨论】：

【解决方案21】：

我刚刚移动了路由模块，即在 FormsModule 和 ReactiveFormsModule 上方的 ARoutingModule 以及在导入模块数组中的 CommonModule 之后。

【讨论】：

【解决方案22】：

您必须声明 FormsModule 并且还必须声明组件

declarations: [
   YourComponent  -->
  ],
  imports: [
    BrowserModule,
    FormsModule, -->

    
  ],

【讨论】：

这就是我的情况。我添加了 FormsModule 但没有在 AppModule 中添加我的组件，它给了我错误。谢谢

【解决方案23】：

同意@micronyks 提供的解决方案，但如果您有一个简单的应用程序，其中没有很多模块，那么这是正确的。否则，如果您不想将其公开给所有模块或整个应用程序，我们需要以类似的方式添加到我们使用该

元素的模块并在该模块内添加以下代码。

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

【讨论】：

【解决方案24】：

.HTML 文件

.ts 文件 @ViewChild('f', { static: false }) slForm: NgForm;

在 HTML 中将 ngForm 更新为 NgForm 对我有用

【讨论】：