Error: formGroup expects a FormGroup instance. Please pass one in. Using example code and still getting error

Question

I know this has been asked a thousand times, but 99% of the solutions seem to be typos. I have reduced the code to what is actually suggested in the error message:

In my html:

<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In my ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-info',
  templateUrl: './my-info.component.html',
  styleUrls: ['./my-info.component.scss']
})
export class MyInfoComponent implements OnInit {

  myGroup: FormGroup;


  ngOnInit() {
    this.myGroup = new FormGroup({
      firstName: new FormControl()
    });
  }

}

I have spent hours and hours on this. The code is working elsewhere in my app. Any help would be greatly appreciated!

Answer 1

My guess is that the problem is you are doing this inside ngOnInit(). Read up on lifecycle hooks: https://angular.io/guide/lifecycle-hooks

In the official docs it shows the form being setup just as a variable

export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

Answer 2

Wow. Thanks for all of your input everyone. It turned out I had another component of the same name buried elsewhere in the application. My ts file was not even being recognized. Angular works in mysterious ways :(

Answer 3

At form tag in your component.html add this: *ngIf="{your form group name}"

for example:

 <form *ngIf="updateBookForm" [formGroup]="updateBookForm" (ngSubmit)="onSubmit()">