无法绑定到“formGroup”，因为它不是“form”的已知属性答案

【问题标题】：Can't bind to 'formGroup' since it isn't a known property of 'form'无法绑定到“formGroup”，因为它不是“form”的已知属性
【发布时间】：2019-08-26 23:22:42
【问题描述】：

情况

我正在尝试在我的 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 { }

问题

为什么会出现这个错误？我错过了什么吗？

【问题讨论】：

确保将 ReactiveFormsModule 导入到使用表单的模块（例如 auth.module 、 form.module ）而不是 app.module 。 angular.io/guide/reactive-forms
我希望我能对 Angular 团队的设计决策投反对票

标签： angular typescript angular2-forms

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

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

【讨论】：

【解决方案3】：

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

我在 app.module.ts 中未声明的 Angular 材质对话框组件中使用了反应形式。主要组件在app.module.ts 中声明，并会打开对话框组件，但对话框组件未在app.module.ts 中显式声明。

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

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

【讨论】：

【解决方案4】：

简单的解决方案：

第 1 步：导入 ReactiveFormModule

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我遇到了同样的问题。确保如果使用 submodules（例如，您不仅有 app.component.module.ts），而且有一个单独的组件（例如 login.module.ts），则在其中包含 ReactiveFormsModule 导入这个 login.module.ts 导入，让它工作。我什至不必在我的 app.component.module 中导入 ReactiveFormsModule，因为我对所有内容都使用了子模块。

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

【讨论】：

这也是我的问题。我有 enter-credentials-modal-component 和 login-site-component。在我为他们两个导入 FormsModule 和 ReactiveFormsModule 之前它没有工作

【解决方案7】：

如果这只是一个 TypeScript 错误，但表单上的一切正常，则可能只需要重新启动 IDE。

【讨论】：

【解决方案8】：

在相应模块中导入ReactiveFormsModule。

【讨论】：

【解决方案9】：

错误表示此模块中无法识别 FormGroup。因此，您必须在使用 FormGroup

的每个模块 中导入这些（以下）模块

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

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

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

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

[formsGroup]="form" 额外的 s 在表单之后

【讨论】：

很好的答案！我错过了一个重要的导入。

【解决方案10】：

别像我一样笨。我遇到了与上面相同的错误，并且 none 以前的答案中的选项都有效。然后我意识到我在FormGroup 中大写了“F”。呵呵！

代替：

[FormGroup]="form"

做：

[formGroup]="form"

【讨论】：

【解决方案11】：

假设您的应用结构如下：

AnotherModule
- <your_form>
AppModule

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

确保AnotherModule 被导入到AppModule。

【讨论】：

【解决方案12】：

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // other modules
    FormsModule,
    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();
  });
});

【讨论】：

【解决方案13】：

使用和导入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 { }

【讨论】：

“REACTIVE_FORM_DIRECTIVES”是字面意思吗？

【解决方案14】：

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

我在功能模块中使用反应式表单构建了一个组件。按照其他答案中描述的指导，我的模块构建没有问题，直到我尝试通过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';

【讨论】：

【解决方案15】：

RC6/RC7/最终版本修复

要修复此错误，您只需在模块中从@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's official docs page 上阅读更多相关信息。

RC5 修复

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

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

【讨论】：

我不明白为什么在 app.module 中导入 FormsModule 时需要添加 REACTIVE_FORM_DIRECTIVES。模块的全部意义在于避免必须在组件内声明指令。
@DanielPliscki 你完全正确，我刚刚发现他们在今天发布的 RC6 版本中修复了这个问题。现在不需要这样做，只需要导入FormsModule 和ReactiveFormsModule。我将编辑我的答案。
我浪费了一个小时，忘记了我为登录表单创建了一个单独的模块，以便在状态之间延迟加载模块。（我是 A2 的新手，还是更喜欢 A1）请确保您使用正确的模块！不要像我一样是个笨蛋。您也不再需要添加到组件中。模块中的导入就足够了。谢谢
谢谢，为我工作。我很困惑为什么我偶然发现的 Angular 2 中的 FormControls 指南中没有提到这一点..
在 Angular 4 中，我在提供者列表中添加了 ReactiveFormsModule，它起作用了。不知道这是否是你应该这样做的方式。

【解决方案16】：

您的 Angular 版本是 11+，并且您使用 VisualStudioCode？p>
并且您已经导入了 FormsModule、ReactiveFormsModule 并将其添加到您的导入部分中，例如app.module.ts（相关模块可以不同，选对的）：

// app.module.ts (excerpt)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [
  ...
  FormsModule,
  ReactiveFormsModule,
  ...
],

您有正确的导入（有时还有其他名称相似的库）；您已经在组件中定义并初始化了表单？

// 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
    });
  }

您的 Component-Template 有您的表单：

<form [formGroup]="form" (ngSubmit)="submit()">
  <!-- MY FORM CONTROLS ARE ALREADY HERE --> 
</form>

您仍然收到错误消息“...因为它不是...的已知属性”？

然后只需简单地重新启动您的 VisualStudioCode :)

【讨论】：

请注意，您需要在组件实际所属的模块中导入FormsModule/ReactiveFormsModule。盲目地将它们放在app.module.ts 是不够的。

【解决方案17】：

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

【讨论】：

如果你的组件是子组件，别忘了将import { FormsModule, ReactiveFormsModule } from '@angular/forms';添加到其各自的模块中。

【解决方案18】：

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

【讨论】：

这是我缺少的魔法酱。

【解决方案19】：

需要在这个模块中导入FormsModule、ReactiveFormsModule

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

例如：

imports: [
  FormsModule,
  ReactiveFormsModule,
  
],

【讨论】：

【解决方案20】：

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

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

【讨论】：

【解决方案21】：

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

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

例如：

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

【讨论】：

【解决方案22】：

在过去的 3 天里，我一直在努力解决这个错误。我在我的两个模块中添加了上面 cmets 中提到的 ReactiveFormsModule 和 FormsModule，但是直到我用另一个“ng serve”重新加载我的项目之前它没有效果。我不知道为什么它没有自动重新加载，但至少我很高兴它终于工作了！请解释一下？

【讨论】：

见这个：stackoverflow.com/questions/49884563/…。发生这种情况是因为有时您的代码没有被转译，而您看到的是旧代码。

【解决方案23】：

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

【讨论】：

您是否尝试在修改后使用 ng serve 重新加载项目？（如果您有嵌入式模块，则必须使用 formGroup 在每个模块中导入表单和反应式表单模块）

【解决方案24】：

从 '@angular/forms' 导入 { FormsModule, ReactiveFormsModule }；并将其添加到 app-module.ts 文件中的 imports 数组中。

【讨论】：

【解决方案25】：

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

import { ContactFormComponent } from './contact-form/contact-form.component';

@NgModule({
    declarations: [..., ContactFormComponent, ...],
    imports: [CommonModule, HomeRoutingModule, SharedModule]
})
export class HomeModule {}

【讨论】：

【解决方案26】：

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

【讨论】：

【解决方案27】：

在您的 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 文件有任何问题，它不会引发编译时错误。

【讨论】：

【解决方案28】：

如果你必须导入两个模块，那么在下面添加这样的

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

【讨论】：

【解决方案29】：

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

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

【讨论】：

【解决方案30】：

小注意：小心加载器并最小化（Rails 环境）：

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

我已将我的 Rails 环境设置为使用此加载器 (config/loaders/html.js.) 成功导入组件的 HTML 路径：

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

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

这让我想到了加载器，它在最小化时将我的 HTML 降级了。

更改选项后，一切正常，我可以再次哭泣。

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

【讨论】：

谢谢你，我终于不得不使用 => minimize: {caseSensitive: true} 让它工作