角度错误”无法绑定到“formGroup”，因为它不是“form”[duplicate]的已知属性

Question

我试图在Angular中创建一个非常基本的表单(目前是一个标签和一个输入字段)。我知道这个问题在这里被问了很多次，但是尽管导入了FormsModule和ReactiveFormsModule，我仍然会得到这个错误，正如在Stackoverflow上多次提到的。

<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({});
  }
}

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

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

Answer 1

将表单初始化移动到 ngonit hook，你可以在 ngoninit 中删除对 null form 的重新初始化，并且只保留外部赋值，但建议在 oninit hook 中启动它，你的代码应该可以工作

Answer 2

在html中使用表单组时，不应重置该表单组。请将其从ngOnInit中删除

    this.form = new FormGroup({});

我已经测试过，在我的末端不可重复
链接：Stackblitz

让我知道，如果你可以用上面的链接复制

Answer 3

请确保您也添加了< code > BrowserAnimationModule 。有时那也会影响你。

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