Question

拥有此项目依赖项：

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

Answer 1

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

@NgModule({
  imports: [
             BrowserModule,

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

Answer 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.
  ],
  ....
})

Answer 3

我知道这是一篇老帖子，但我想分享我的解决方案。我添加了＆＃34; ReactiveFormsModule ＆＃34;在 imports []数组中解决此错误

错误：＆＃34; exportAs＆＃34;没有指令设置为＆＃34; ngForm＆＃34; （＆＃34;

修复：

module.ts

从＆＃39; @ angular / forms＆＃39;

导入{FormsModule， ReactiveFormsModule }

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

Answer 4

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

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

Answer 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>

Answer 6

检查是否导入FormsModule。新形式的角度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>

Answer 7

此

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

还会导致错误，可以通过添加ngForm directive来解决。

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

Answer 8

你需要关心的两件事......

如果使用子模块，则必须在该子模块中导入FormModule。
```
        **imports:[CommonModule,HttpModule,FormsModule]**
```
您必须在模块中导出FormModule
```
    **exports:[FormsModule],**
```
所以它看起来像的进口：[CommonModule，HTTP模块，FormsModule] 出口：[FormsModule]

顶部的

你必须导入FormsModule

从'@ angular / forms'导入{FormsModule};

如果您只使用app.module.ts，那么

无需导出..只需要导入

Answer 9

由于同样的原因，我一遍又一遍地问这个问题。因此，让我通过说我在做什么错来回答这个问题。可能会对某人有所帮助。

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

ng g c 组件/某物/某物

它所做的就是根据需要创建了组件。

此外，在创建组件时，它在App Module的声明数组中添加了该组件。

在这种情况下，请删除它。和瞧！它可能会起作用。

Answer 10

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"之类的错误。

Answer 11

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

Answer 12

就我而言，我忘记将组件添加到app.module.ts的声明数组中，瞧！问题已解决。

Answer 13

如果尝试使用茉莉花成角度编写单元测试用例，也会发生此错误。

此错误的基本概念是import FormsModule。因此，在单元测试文件中，我们添加导入Section并将FormsModule放置在该文件中的

下

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

Answer 14

我遇到了这个问题，但这里没有一个答案对我有用。我用Google搜索并发现 FormsModule not shared with Feature Modules

因此，如果您的表单位于精选模块中，则必须导入并在其中添加FromsModule。

请参考：https://github.com/angular/angular/issues/11365

Answer 15

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

Answer 16

如果这样分配名称：

#editForm="testForm"

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

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

Answer 17

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

如果要在应用程序中导入FormsModule但想跳过特定的表单，则可以使用ngNoForm指令，这将阻止ngForm添加到表单中

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

Answer 18

简单（如果您没有导入模块），然后导入并声明从'@ angular / forms'导入{FormsModule};

，如果您这样做了，则只需要从输入字段中删除 formControlName ='whatever'。

Answer 19

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

Answer 20

只需导入正确的模块，

“ FormsModule”

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule //<---.
  ],
  ....
})

Answer 21

您必须导入FormsModule，然后将其放置在导入部分中。

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

Answer 22

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

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

这解决了我的问题

Answer 23

另一项检查：

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

@NgModule({
declarations: [
    YourComponent,
],

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

Answer 24

仅将其作为参考，因为这适用于较新的角度版本 There is no directive with “exportAs” set to “ngForm”

Answer 25

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

元素的模块中，如果您不想将其暴露给所有模块或整个应用程序，则在该模块中添加以下代码。

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

Answer 26

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

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

    
  ],

Answer 27

我有同样的问题并通过使用以下命令npm update -D && npm update -S更新所有依赖项（package.json）来解决它

正如@GünterZöchbauer指出的那样，请务必先包含FormsModule。

“exportAs”设置为“ngForm”没有指令

27 个答案:

无需导出..只需要导入