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!

score 0 · Answer 1 · answered Apr 06 '21 at 16:14

0

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

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

answered Apr 06 '21 at 16:14

Srikar Phani Kumar M

1,069
1
3
8

Done. No effect unfortunately. – Amaryllis Apr 07 '21 at 06:25

score 0 · Answer 2 · answered Apr 06 '21 at 16:24

0

You should not reset the formGroup as you are using it in html remove this from ngOnInit

    this.form = new FormGroup({});

I have tested and not reproducible at my end
Link: Stackblitz

Let me know if you can reproduce with above link

answered Apr 06 '21 at 16:24

Indraraj26

1,726
1
14
29

I copied your code and still can't reproduce it. – Amaryllis Apr 07 '21 at 06:25
I created a new project and copied your code inside. I added the html block by block. It's strange, but when I added just one label and input field, everything went well. When I added a second label and input field, I got the same error as mentioned above. I don't understand. – Amaryllis Apr 07 '21 at 09:08
could you please share your minimal code via stackblitz or github – Indraraj26 Apr 07 '21 at 09:30
It's working for the moment. I discovered in the minimal code file I created that the selector of my root component didn't have the same name as mentioned in the index.html, but in my original file, the selector was correct. I hope the error is gone now (fingers crossed!) even if we don't know what was causing the issue. Thanks for your help though! – Amaryllis Apr 07 '21 at 11:00
Here's a link to Stackblitz with minimal code producing my error: https://stackblitz.com/edit/angular-ivy-xjgdek?file=src%2Fapp%2Fapp.component.ts – Amaryllis Apr 09 '21 at 09:36
You forget to import ReactiveFormsModule in app.module.ts – Indraraj26 Apr 09 '21 at 10:46
I forgot the import in the Stackblitz project, indeed, but I did add it to my original project where the same error occurs. When I add it to Stackblitz, the error disappears. Not so in my original project unfortunately. – Amaryllis Apr 09 '21 at 12:56
do it then let me know if it is reproducible – Indraraj26 Apr 09 '21 at 13:18

score 0 · Answer 3 · answered Apr 06 '21 at 19:57

0

Move the form initialization to ngonit hook and you can keep the form declaration outside Your code should work if you remove reinitialization to null form in ngoninit and just keep the outer assignment But is recommended to initiate it in oninit hook

answered Apr 06 '21 at 19:57

Nikhil Dhawan

69
1
6

I removed the reinitialization to null in the ngoninit method and left the declaration outside as it was, but I'm still getting that same error. – Amaryllis Apr 07 '21 at 06:26

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

3 Answers3