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

情况

我试图在我的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)}}

ng模块

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 { }

这个问题

为什么我犯了这个错误？我错过了什么吗？

1186685 次浏览
小开
最佳答案

RC6/RC7/最终版本FIX

要修复此错误，您只需要从模块中的@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修复

您需要在控制器中import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'并将其添加到@Component中的directives。这将解决问题。

修复后，您可能会收到另一个错误，因为您没有将formControlName="name"添加到表单中的输入。

小开

建议的答案对我使用Angular 4不起作用。相反，我不得不使用attr前缀的属性绑定的另一种方式：

<element [attr.attribute-to-bind]="someValue">
小开

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 { }
小开

请记住，如果您定义了“功能模块”，则需要在功能模块中导入，即使您已经导入到AppModule。从Angular留档：

模块不继承对其他模块中声明的组件、指令或管道的访问。AppModul导入的内容与ContttModul无关，反之亦然。在ContttComponent可以与[（ngModel）]绑定之前，它的ContttModul必须导入FormsModul。

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

小开

如果你必须导入两个模块，然后像下面这样添加

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]})
小开

好吧，经过一些挖掘，我找到了一个解决方案“不能绑定到'formGroup'，因为它不是'form'的已知属性。

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

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';`
@NgModule({declarations: [AppComponent,]imports: [FormsModule,ReactiveFormsModule,AuthorModule,],...

但是当我从另一个模块中添加的组件中使用[formGroup]指令时，这并不起作用，例如在author.component.ts中使用[formGroup]，该author.component.ts在author.module.ts文件中订阅：

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中添加了ReactiveFormsModul，默认情况下，ReactiveFormsModul将被它的所有子模块继承，比如author.module在这种情况下…（错了！）。我需要在author.module.ts中导入ReactiveFormsModul以使所有指令正常工作：

...import { FormsModule, ReactiveFormsModule } from '@angular/forms';...
@NgModule({imports: [...,FormsModule,    //added here tooReactiveFormsModule //added here too],declarations: [...],providers: [...]})
export class AuthorModule {}

因此，如果您使用的是子模块，请确保在每个子模块文件中导入ReactiveFormsModule。希望对大家有帮助

小开

对于浏览这些线程的人来说，这个错误。在我的例子中，我有一个共享模块，我只导出了FormsModul和ReactiveFormsModul，忘记导入它。这导致了一个奇怪的错误，即表单组在子组件中不起作用。希望这能帮助人们挠头。

小开

我在尝试做e2e测试时遇到了这个错误，没有答案让我发疯。

如果您正在进行测试，找到你的*.specs.ts文件并添加：

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

Can't bind to 'formGroup' since it isn't a known property of 'form'

这意味着您尝试使用角（[prop]）绑定属性，但角找不到他知道的该元素的任何内容（在本例中为form）。

这可能是因为没有使用正确的模块（在某个地方缺少导入），有时只是导致错字，例如：

[formsGroup]，s在form之后

小开

我在组件的单元测试期间遇到过此错误（仅在测试期间，在应用程序中它正常工作）。解决方案是在.spec.ts文件中导入ReactiveFormsModule：

// Import moduleimport { ReactiveFormsModule } from '@angular/forms';
describe('MyComponent', () => {beforeEach(async(() => {TestBed.configureTestingModule({declarations: [MyComponent],imports: [ReactiveFormsModule],  // Also add it to 'imports' array}).compileComponents();}));});
小开

此问题是由于缺少FormsModul、ReactiveFormsModul的导入而发生的。我也遇到了同样的问题。我的情况不同。因为我正在使用模块。所以我在父模块中错过了上述导入，虽然我已将其导入子模块，但它不起作用。

然后我将它导入到我的父模块中，如下所示，成功了！

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';import { AlertModule } from 'ngx-bootstrap';
@NgModule({imports: [CommonModule,FormsModule,ReactiveFormsModule,],declarations: [MyComponent]})
小开

一点注意：小心加载器并最小化（Rails env.）：

在看到这个错误并尝试了所有解决方案之后，我意识到我的html加载器有问题。

我已经将我的Rails环境设置为使用此加载器成功导入我的组件的超文本标记语言路径（config/loaders/html.js.）：

module.exports = {test: /\.html$/,use: [ {loader: 'html-loader?exportAsEs6Default',options: {minimize: true}}]}

经过几个小时的努力和无数的ReactiveFormsModul导入，我看到我的formGroup是小写字母：formgroup。

这让我想到了加载器，以及它在最小化上下载了我的超文本标记语言。

在改变了选择之后，一切都按照它应该的方式工作，我可以再哭一次。

我知道这不是问题的答案，但对于未来的Rails访问者（以及其他使用自定义加载器的访问者），我认为这可能会有所帮助。

小开

我在Angular 7中遇到了同样的问题。只需在您的app.module.ts文件中导入以下内容。

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

然后将FormsModul和ReactiveFormsModul添加到您的导入数组中。

imports: [FormsModule,ReactiveFormsModule],
小开

在您的app.module.ts.中导入并注册ReactiveFormsModule

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({declarations: [AppComponent,HighlightDirective,TestPipeComponent,ExpoentialStrengthPipe
],imports: [BrowserModule,ReactiveFormsModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }

确保. ts和. html文件中的拼写正确。xxx.ts

  profileForm = new FormGroup({firstName: new FormControl(''),lastName: new FormControl('')});

xxx.html档案

  <form [formGroup]="profileForm"><label>First Name:<input type="text" formControlName = "firstName"></label>
<label>Last Name:<input type="text" formControlName = "lastName"></label></form>

我错误地编写了[FormGroup]而不是[formGroup]。在. html中检查您的拼写是否正确。如果. html文件中有任何错误，它不会引发编译时错误。

小开

使用和导入REACTIVE_FORM_DIRECTIVES：

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 { }
小开

如果您在开发组件时遇到此问题，您应该将这两个模块添加到最接近的模块：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';@NgModule({declarations: [AppComponent],imports: [// other modulesFormsModule,ReactiveFormsModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }

如果您正在为您的组件开发测试，那么您应该将此模块添加到您的测试文件中，如下所示：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';import { ContactusComponent } from './contactus.component';import { ReactiveFormsModule } from '@angular/forms';
describe('ContactusComponent', () => {let component: ContactusComponent;let fixture: ComponentFixture<ContactusComponent>;
beforeEach(async(() => {TestBed.configureTestingModule({declarations: [ContactusComponent],imports:[ReactiveFormsModule]
}).compileComponents();}));
beforeEach(() => {fixture = TestBed.createComponent(ContactusComponent);component = fixture.componentInstance;fixture.detectChanges();});
it('should create', () => {expect(component).toBeTruthy();});});
小开

假设您已经像下面这样构建了您的应用程序：

  • AnotherModule
    • <your_form>
  • AppModule

根据您的表单类型在AnotherModule中导入ReactiveFormsModule或FormsModule。

确保AnotherModule在AppModule中导入。

小开

别像我一样傻了。我也遇到了和上面一样的错误，而且前面答案中的第一个选项起作用了。然后我意识到我在FormGroup中把F大写了。哇！

而不是：

[FormGroup]="form"

做：

[formGroup]="form"
小开

错误表明此模块中无法识别FormGroup。因此，您必须在使用表单组的每个模块中导入这些（下面）模块

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

然后将FormsModul和ReactiveFormsModul添加到模块的导入数组中。

imports: [FormsModule,ReactiveFormsModule],

你可能认为我已经在应用模块中添加了它，它应该从它继承？但事实并非如此。因为这些模块正在导出仅在导入模块中可用的必需指令。在共享模块中阅读更多。

这些错误的其他因素可能是拼写错误，如下所示…

[表单组]="表单"资本F而不是小f

[formsGroup]="自定义表单"额外<的trong>的形式后

小开

备注：如果你在子模块的组件中工作，那么你只需要在子模块中导入ReactiveFormsModule而不是父应用根模块。

小开

在相应的模块中导入响应模块。

小开

如果这只是一个TypeScript错误，但表单上的所有内容都正常工作，您可能只需要重新启动您的IDE。

小开

我也遇到了同样的问题。确保如果使用子模块（例如，您不仅有app.component.module.ts），而且您有一个单独的组件，例如login.module.ts，您在这个login.module.ts导入中包含ReactiveFormsModul导入，以便它工作。我甚至不必在我的app.component.module中导入ReactiveFormsModul，因为我所有的东西都使用子模块。

文件login.module.ts

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage } from './login.page';
@NgModule({imports: [CommonModule,FormsModule,ReactiveFormsModule,IonicModule,LoginPageRoutingModule],declarations: [LoginPage]})export class LoginPageModule {}
小开

当您在模态（entry组件）中有formGroup时，您必须在实例化模态的模块中也导入ReactiveFormsModule。

小开

简单的解决方案：

步骤1：导入响应格式模块

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

步骤2：将“ReactiveFormsModule”添加到导入部分

imports: [
ReactiveFormsModule]

步骤3：重新启动应用程序并完成

示例：

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import {ReactiveFormsModule} from '@angular/forms';import { EscalationManagementRoutingModule } from './escalation-management-routing.module';import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';

@NgModule({declarations: [EscalationManagementRouteWrapperComponent],imports: [CommonModule,EscalationManagementRoutingModule,ReactiveFormsModule]})export class EscalationManagementModule { }
小开

我的解决方案很微妙，我没有看到它已经列出。

我在一个没有在app.module.ts中声明的Angular材料对话框组件中使用了反应式表单。主组件在app.module.ts中声明，将打开对话框组件，但对话框组件没有在app.module.ts中显式声明。

我正常使用对话框组件没有任何问题，除了每当我打开对话框时表单都会抛出此错误：

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

小开

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

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

然后将FormsModul和ReactiveFormsModul添加到导入数组中。

imports: [FormsModule,ReactiveFormsModule],

说明：您还可以将ReactiveFormsModule导入特定模块，而不是app.module.ts

小开

我有同样的问题，问题实际上只是我忘记导入和声明模块中保存表单的组件：

import { ContactFormComponent } from './contact-form/contact-form.component';
@NgModule({declarations: [..., ContactFormComponent, ...],imports: [CommonModule, HomeRoutingModule, SharedModule]})export class HomeModule {}
小开

导入{FormsModul， ReactiveFormsModul}从'@角/窗体'；并将其添加到app-module.ts文件的导入数组中。

小开

即使您已经导入了FormsModule和ReactiveFormsModule，您也会收到此错误消息。我将一个组件（使用[formGroup]指令）从一个项目移动到另一个项目，但未能将该组件添加到新模块中的declarations数组中。这导致了Can't bind to 'formGroup' since it isn't a known property of 'form'错误消息。

小开

在过去的3天里，我一直在与这个错误作斗争。我在我的两个模块中添加了上面评论中提到的ReactiveFormsModul和FormsModul，但在我用另一个“ng service”重新加载我的项目之前，它没有任何效果。我不知道为什么它没有自动重新加载，但至少我很高兴它终于成功了！有什么解释吗？

小开

您需要导入此模块中的FormsModule、ReactiveFormsModule以及顶层。

如果您在另一个模块中使用了reactiveForm，那么您还必须执行此步骤以及上述步骤：在该特定模块中导入reactiveFormsModule。

例如：

imports: [BrowserModule,FormsModule,ReactiveFormsModule,AppRoutingModule,HttpClientModule,BrowserAnimationsModule],
小开

在app.modual.ts文件中导入下面的行并在角cli中运行命令ng s -o。

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

您需要在这个模块中导入FormsModul、ReactiveFormsModul

如果您在另一个模块中使用了reactiveForm，那么您还必须执行此步骤以及上述步骤：在该特定模块中导入reactiveFormsModul。

例如：

imports: [FormsModule,ReactiveFormsModule,  
],
小开

  1. 您的Angular版本是11+，您使用VisualStudioCode吗？

  2. 您已经导入了FormsModule、ReactiveFormsModule并将其添加到例如app.module.ts中的导入部分（相关模块可以不同，选择正确的一个）：

// app.module.ts (excerpt)import { FormsModule, ReactiveFormsModule } from '@angular/forms';imports: [...FormsModule,ReactiveFormsModule,...],
  1. 您有正确的导入（有时还有其他名称相似的库）；您已经在组件中定义并初始化了表单？
// MyWonderfulComponent (excerpt)

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class MyWonderfulComponent implements OnInit {form: FormGroup;...constructor (private fb: FormBuilder) {this.form = this.fb.group({// DON'T FORGET THE FORM INITIALISATION});}
  1. 您的组件模板有您的表单：
<form [formGroup]="form" (ngSubmit)="submit()"><!-- MY FORM CONTROLS ARE ALREADY HERE --></form>
  1. 您仍然会收到错误消息“…因为它不是…的已知属性”？

然后只需简单地重新启动您的VisualStudioCode：）

小开

我尝试了几乎所有的解决方案，但我的问题有点不同（愚蠢）。我在路由模块中添加了组件，但没有包含它的主模块。因此，请确保您的组件是模块的一部分。

小开

我没有看到这里描述的这种特定的失败机制，也没有在这个问题的其他地方看到任何对public-api.ts的引用，所以添加它以防它帮助其他人。

我在功能模块中使用Reactive Forms构建了一个组件。按照其他答案中描述的指导，我的模块构建时没有问题，直到我尝试通过public-api.ts导出组件。在那一点上，我开始得到熟悉的错误Can't bind to 'formGroup' since it isn't a known property of 'form'，没有其他指示可能出了什么问题。

此时我出现了这个问题，因为我忘记从NgModule中声明和导出组件。一旦我将其添加到那里，模块就会再次开始构建。因此，在尝试导出Reactive Forms组件时，在NgModule中要记住三件事：

import { NgModule } from '@angular/core';import { ReactiveFormsModule } from '@angular/forms';import { MyExportedComponent } from './components/my-exported.component';

@NgModule({declarations: [MyExportedComponent // this],imports: [ReactiveFormsModule // this],exports: [MyExportedComponent // and this],providers: []})export class MyModule { }

在这一点上，Angular将在public-api.ts中很好地处理这一行：

export * from './lib/my-module/components/my-exported.component';
小开

ReactiveFormsModule和FormsModule导入应该添加到您的自定义组件模块中，以及它被调用的父组件中。

例如，我需要为我的过滤器组件添加表单。所以我应该在我的过滤器模块及其父页面（可能是列表）模块中添加此导入，单击此过滤器按钮的位置。

小开

如果遇到此类问题，我们必须关注三个要点。

  1. 在任何共享或应用模块中导入ReactiveFormsModule, FormsModule。
  2. 如果您创建了共享模块，则将其导入到您正在使用表单组的模块中，并
  3. 检查组件是否在 declarations: [ ProjectComponent ]像这样。
小开

如果，
已经导入

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

在rootModul&自定义组件模块&仍然得到错误

NG8002：无法绑定到'formGroup'，因为它不是形式

只是，

重新启动您的应用程序服务器

这将解决这个问题

小开

您可以导入formModul和reactiveFormModul

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

@NgModule({declarations: [ContactComponent],imports: [CommonModule,ContactRoutingModule,FormsModule,ReactiveFormsModule]})export class ContactModule { }
小开
  1. 转到：app.module.ts
  2. 导入：[……响应模块]
  3. 添加这个：导入{ReactiveFormsModul}from'@角/形式'；
  4. 它应该看起来像这样：

mport { ReactiveFormsModule } from '@angular/forms';
@NgModule({declarations: [  
],imports: [    
ReactiveFormsModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }

小开

如果您正确导入了FormModul和ReactiveFormModul，可能会出现另一个问题。也许您没有将您的组件添加到app模块中的模块声明中。因此，请将您的组件添加到app.module.ts声明中：

@NgModule({declarations: [YourNewComponent]})
小开

对于Angular 14和谁使用带有路由的子模块

我的问题与使用带有路由的子模块有关。要使其工作，请遵循以下三个步骤：

1、app.module

imports: [//other-modulesReactiveFormsModule

]

2-在子模块中

imports: [//other-modulesReactiveFormsModule

]

3-在app-routing.module添加以下路由（我的模块被命名为AuthModul）

{path: 'signup',component: SignUpComponent,children: [{path: '',loadChildren: () =>import('./features/auth/auth.module').then((m) => m.AuthModule),},]

}，

希望有一天能帮助别人！


提交答案