logo标签列表

无法绑定到 'form' 的 'formGroup'，因为它不是 'form' 的已知属性。

angulartypescriptangular2-forms
1315

情况

我正在尝试在我的Angular应用程序中创建一个应该非常简单的表单，但无论如何，它都不起作用。

Angular版本

Angular 2.0.0 RC5

错误信息

不能绑定到'formGroup'，因为它不是'form'的已知属性

输入图片描述此处

代码

视图

<form [formGroup]="newTaskForm" (submit)="createNewTask()">
   <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" required>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

控制器

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})
export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder)
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    }
}

ngModule（模块）

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'

@NgModule({
    imports: [
        BrowserModule,
        routing,
        FormsModule
    ],
    declarations: [ AppComponent ],
    providers: [
        TaskService
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

问题

为什么我会收到那个错误？我有什么漏掉的吗？

10
请确保在使用表单的模块中引入ReactiveFormsModule（例如auth.module，form.module），而不是app.module。 - mercury
3
我希望我能为Angular团队所做的设计决策投下反对票。 - Felipe
我偶尔在VS Code中会收到这个错误信息，尽管我的代码是正确的。我只需要打开xxx.module.ts文件，问题就立即消失了。也许其他人也有同样的问题...可能是一个将来会被修复的bug。 - MikhailRatner
以下任何答案都没有解决我的问题。我的问题是没有将组件添加到模块声明中。因此，请将您的组件添加到 app.module.ts 的 declarations: [YourComponent] 中。 - Aven Desta
如果您已经在组件中导入了 ReactiveFormsModule，那么这个错误可能是一个误导！请确保您还将您的模块引用添加到您的应用程序模块的 imports 中。 - jbobbins
52个回答
2181

RC6/RC7/Final版本修复

要修复此错误，您只需要在模块中从@angular/forms导入ReactiveFormsModule。以下是带有ReactiveFormsModule导入的基本模块示例：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }
为了更好地解释，formGroup 是一个指令选择器，用于选择名为 FormGroupDirective 的指令，它是 ReactiveFormsModule 的一部分，因此需要导入它。它用于将现有的 FormGroup 绑定到 DOM 元素上。您可以在Angular 官方文档页面中详细了解它。 RC5 FIX 您需要在控制器中导入 { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' 并将其添加到 @Component 的 directives 中。这将解决问题。
解决该问题后，您可能会因为在表单中没有添加 formControlName="name" 到输入框而收到另一个错误。
19
我不理解的是，如果在app.module中导入了FormsModule，为什么还需要添加REACTIVE_FORM_DIRECTIVES。模块的整个目的就是避免在组件内声明指令。 - Daniel Pliscki
27
您说得完全正确，我刚刚发现他们在今天发布的RC6版本中解决了这个问题。现在您不需要再做这个操作，只需要导入 FormsModule 和 ReactiveFormsModule 即可。我会编辑我的回答。 - Stefan Svrkota
18
我浪费了一小时的时间，完全忘记了我为登录表单创建了一个单独的模块以便在状态之间进行惰性加载。 （我对A2还不熟悉，仍然更喜欢A1）请确保您使用正确的模块！ 不要像我这样做蠢事。 您也不再需要向组件添加内容。 您模块中的导入已足够。 谢谢。 - user1889992
5
谢谢，对我有用。我很困惑为什么我碰到的 Angular 2 的 FormControls 指南中没有提到这个方法。 - cjohansson
2
在Angular 4中，我将ReactiveFormsModule添加到提供程序列表中，并且它起作用了。不确定这是否是您应该这样做的方式。 - BrunoLM
显示剩余9条评论
204

如果您使用共享模块，Angular 4与功能模块结合使用需要您同时导出ReactiveFormsModule才能正常工作。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }
184

经过一番探索，我找到了一个解决方法来处理“无法绑定到 'form' 的 'formGroup'，因为它不是 'form' 的已知属性”问题。

在我的情况下，我一直在使用多个模块文件，在app.module.ts中添加了ReactiveFormsModule。

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

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

但是，当我在另一个模块中添加的组件中使用 [formGroup] 指令时，这种方法就不起作用了。例如，在 author.module.ts 文件中订阅的 author.component.ts 中使用 [formGroup]:

但这种方法在我使用来自另一个模块的组件中的 [formGroup] 指令时无法正常工作，例如在 author.module.ts 文件中订阅的 author.component.ts 中使用 [formGroup]:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

我曾认为如果在 app.module.ts 中添加 ReactiveFormsModule，那么默认情况下该模块的所有子模块，例如 author.module，在此情况下都会继承 ReactiveFormsModule...（错误！） 为了使所有指令生效，我需要在 author.module.ts 中导入 ReactiveFormsModule：

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

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}
所以，如果您正在使用子模块，请确保在每个子模块文件中导入ReactiveFormsModule。
2
对我来说可以工作，问题完全相同，我真的以为在exports数组中的模块将被子模块继承...不知道为什么！编辑：文档说 exports 是为了使组件、管道、指令在任何组件的模板中可用。 - guy777
如果您使用惰性加载或处理多个模块，那么这就是解决方案。谢谢。 - Murat Yıldız
70

在组件单元测试时我遇到了这个错误（只有在测试过程中出现，在应用程序中正常工作）。解决方法是在.spec.ts文件中导入ReactiveFormsModule：

// Import module
import { ReactiveFormsModule } from '@angular/forms';

describe('MyComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [ReactiveFormsModule],  // Also add it to 'imports' array
        })
        .compileComponents();
    }));
});
36
  1. 前往: app.module.ts
  2. 导入:[ .... ReactiveFormsModule ]
  3. 添加: import { ReactiveFormsModule } from '@angular/forms';
  4. 应该长这样:

mport { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
  
  ],
  imports: [
    
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

29
错误显示此模块中未识别FormGroup。因此，您必须在使用FormGroup的每个模块中导入以下模块。 
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

然后将FormsModule和ReactiveFormsModule添加到您模块的导入数组中。

imports: [
  FormsModule,
  ReactiveFormsModule
],

您可能会认为我已经在AppModule中添加了它并且它应该继承自它？但实际上并没有。因为这些模块正在导出所需的指令，这些指令仅在导入模块中可用。请在共享模块中阅读更多内容。

导致这些错误的其他因素可能是类似以下的拼写错误...

[FormGroup]="form" 大写的F而不是小写的f

[formsGroup]="form" 在form后面多了一个s

1
太好了！我漏掉了一个关键的引入。 - Joseph
28

对我来说，建议的答案在 Angular 4 中并不起作用。相反，我必须使用另一种带有 attr 前缀的属性绑定方式：

<element [attr.attribute-to-bind]="someValue">
4
嘿，你确定你的回答和问题有关吗？ :) 问题是关于设置表单时出现的问题 - 因未正确设置ngModule而引起。 - FrancescoMussi
1
@johnnyfittizio 我很确定。相同的情况，相同的错误信息。 - str
2
这对我有效，但有些奇怪 - 为什么我需要attr.? - CodyBugstein
非常感谢。这对我也起作用了，但我认为必须有其他东西触发了问题，比如库版本或<form>标签位置？很奇怪。 - Memetican
找到了——问题在于我需要将ReactiveFormsModule直接导入到我的页面的.module.ts中，而不是.page.ts中...一旦我这样做了，我的模板就可以正确识别formGroup属性，而无需使用attr.前缀。 - Memetican
21

首先，这与Angular版本 > 2无关。只需在您的app.module.ts文件中导入以下内容即可解决问题。

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

然后将FormsModule和ReactiveFormsModule添加到您的导入数组中。

imports: [
  FormsModule,
  ReactiveFormsModule
],

注意: 您也可以将 ReactiveFormsModule 导入到特定的模块，而不是导入到 app.module.ts

尝试在Angular 15中实现，仍然出现错误。 :( - Scott Fraley
20

如果您需要导入两个模块，则可以像以下方式添加：

import {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
天哪，Angular使用ng g c myComponent命令生成组件后，竟然没有将该组件添加到app.module.ts的declarations部分中，添加后应用程序才能编译通过。这也太蠢了吧？ - Rin and Len
17
请注意，如果您定义了“特性模块”，即使已经在AppModule中导入了模块，您仍需要在特性模块中进行导入。来自Angular文档的说明如下：

模块不会继承其他模块声明的组件、指令或管道的访问权限。 AppModule 导入的内容与 ContactModule 无关，反之亦然。在 ContactComponent 可以使用 [(ngModel)] 进行绑定之前，其 ContactModule 必须导入 FormsModule。

https://angular.io/docs/ts/latest/guide/ngmodule.html

1
非常感谢！我为这个问题工作了几个小时，无法想象问题出在哪里...只需将我的功能模块导入应用程序模块即可解决问题。 - keschra
这也是我的问题。忘记在模块中导入了。谢谢！ - Scott Fraley
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接