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

Question

I'm trying to create a very basic form in Angular (a label and an input field for now). I know this question has been asked a lot of times here, but I'm still getting this error despite the import of the FormsModule and ReactiveFormsModule, as suggested multiple times here on Stackoverflow.

My html (which I also tried with <div class="form" [formGroup]=etc...):

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

My module:

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

My component:

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

I'm on Angular version 11.2.8.

Here's a print screen of the error on Stackblitz: https://i.stack.imgur.com/teoyi.png

SOLUTION I was working in another module and even though I created this module using the CLI, it hadn't been imported to the AppModule. After importing it, all the errors disappeared. So, if you have different strange errors in your project, check if your modules have been imported in the AppModule!

Srikar Phani Kumar Marti Srikar Phani Kumar Marti · Accepted Answer · 2021-04-06T16:14:00

Please make sure you add BrowserAnimationModule as well. Sometimes that also might effect you.

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

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

3 Answers