角度错误“无法绑定到‘formGroup’，因为它不是‘form’的已知属性答案

【问题标题】：Angular error "Can't bind to 'formGroup' since it isn't a known property of 'form'角度错误“无法绑定到‘formGroup’，因为它不是‘form’的已知属性
【发布时间】：2021-04-06 15:37:13
【问题描述】：

我正在尝试在 Angular 中创建一个非常基本的表单（现在是一个标签和一个输入字段）。我知道这个问题在这里被问了很多次，但是尽管导入了 FormsModule 和 ReactiveFormsModule，我仍然遇到这个错误，正如 Stackoverflow 上多次建议的那样。

我的 html（我也尝试使用

<form class="form" [formGroup]="form" (ngSubmit)="onSubmit()">
  <!--formgroup topic-->
  <div class="form-group">
    <label for="topic">Topic:</label>
    <br />
    <input type="text" id="topic"
      formControlName="topic" required
      placeholder="Write something here..."
      class="form-control" />
  </div>
</form>

我的模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { AddTicketComponent } from './add-ticket/add-ticket.component';
import { SettingsComponent } from './settings/settings.component';
import { OverviewComponent } from './overview/overview.component';
import { HistoryComponent } from './history/history.component';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from '../app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatTableModule } from '@angular/material/table';
import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  declarations: [
    AddTicketComponent,
    SettingsComponent,
    OverviewComponent,
    HistoryComponent
  ],
  imports: [
    CommonModule,
    FontAwesomeModule,
    RouterModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatTableModule,
    BrowserModule
  ]
})
export class TicketToolModule { }

我的组件：

import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Ticket } from '../Data/Models/ticket';

@Component({
  selector: 'app-history',
  templateUrl: './history.component.html',
  styleUrls: ['./history.component.css'],
})

export class HistoryComponent implements OnInit {
 
  public form: FormGroup = new FormGroup({
    id: new FormControl('', Validators.required),
    topic: new FormControl('', Validators.required),
    category: new FormControl('', Validators.required),
    subcategory: new FormControl('', Validators.required),
    impact: new FormControl('', Validators.required),
    description: new FormControl('', Validators.required),
    date: new FormControl('', Validators.required),
    email: new FormControl('', Validators.required),
    images: new FormControl('', Validators.required)
  });

  constructor() {
  }

  ngOnInit(): void {
    this.form = new FormGroup({});
  }
}

我使用的是 Angular 11.2.8 版。

这是 Stackblitz 上错误的打印屏幕： https://i.stack.imgur.com/teoyi.png

解决方案 我在另一个模块中工作，即使我使用 CLI 创建了这个模块，它也没有被导入到 AppModule。导入后，所有错误都消失了。所以，如果你的项目中有各种奇怪的错误，请检查你的模块是否已经导入到 AppModule 中！

【问题讨论】：

标签： angular forms formgroups

【解决方案1】：

请确保您也添加BrowserAnimationModule。有时这也可能影响到您。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

【讨论】：

完成。很遗憾没有效果。

【解决方案2】：

当你在 html 中使用它时，你不应该重置 formGroup 从 ngOnInit 中删除它

    this.form = new FormGroup({});

我已经测试过，最终无法重现
链接：Stackblitz

如果您可以使用上面的链接复制，请告诉我

【讨论】：

我复制了你的代码，仍然无法重现。
我创建了一个新项目并在其中复制了您的代码。我逐块添加了html。这很奇怪，但是当我只添加一个标签和输入字段时，一切都很顺利。当我添加第二个标签和输入字段时，我得到了与上面提到的相同的错误。我不明白。
能否请您通过 stackblitz 或 github 分享您的最小代码
目前正在工作。我在创建的最小代码文件中发现，我的根组件的选择器与 index.html 中提到的名称不同，但在我的原始文件中，选择器是正确的。我希望这个错误现在已经消失了（手指交叉！）即使我们不知道是什么导致了这个问题。不过感谢您的帮助！
这里是 Stackblitz 的链接，使用最少的代码会产生我的错误：stackblitz.com/edit/…

【解决方案3】：

将表单初始化移动到ngonit钩子，您可以将表单声明保留在外面如果您在 ngoninit 中删除重新初始化为 null 形式并只保留外部分配，您的代码应该可以工作但建议在 oninit hook 中启动它

【讨论】：

我在 ngoninit 方法中删除了重新初始化为 null 并将声明保留在外面，但我仍然遇到同样的错误。