Error: formGroup expects a FormGroup instance. Please pass one in. Reactive forms Angular

Question

I am using reactive forms in Angular version 10. But getting the following error.

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

       Example:

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

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });
    at Function.missingFormException (forms.js:1700:1)
    at FormGroupDirective._checkFormPresent (forms.js:5632:1)
    at FormGroupDirective.ngOnChanges (forms.js:5454:1)
    at FormGroupDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2373:1)
    at callHook (core.js:3285:1)
    at callHooks (core.js:3251:1)
    at executeInitAndCheckHooks (core.js:3203:1)
    at selectIndexInternal (core.js:6324:1)
    at ɵɵadvance (core.js:6306:1)
    at PatientInformationComponent_Template (template.html:39:34)

My sample HTML code is as follows.

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

My TS code:

export class MyComponent implements OnInit{
   MyForm: FormGroup;

   constructor( private formbuilder: FormBuilder) {}

   ngOnInit() {
       this.MyForm= this.formbuilder.group({
        firstName: new FormControl("", Validators.maxLength(100)),
        lastName: new FormControl("",Validators.maxLength(100)),
    });
   }

}

Although the form works properly, but the error always shows in the console. I think it might be because of some other lifecycle hook. Could you give me some solution for this.

Enscroll

Answer 1

Since you haven't initialized your form called myForm in .ts code, you should try adding *ngIf and change div HTML tag to form element.

<form *ngIf="form" 
     [formGroup]="MyForm">
        <input formControlName="firstName">
        <input formControlName="lastName">
</form>

Pantsuit

Answer 2

In My Case

I make the spelling mistake. I write ngOnInIt instead of ngOnInit.
So Please check the splling of angular hook.
and dont forget to import FormsModule and ReactiveFormsModule.

**Here is my code**


  loginForm!: FormGroup;
constructor(
private fb: FormBuilder,
) { }

  ngOnInit() {
this.loginForm = this.fb.group({
  email: ['', [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z.-]+\\.[a-z]{2,4}$")]],
  password: ['', [Validators.required, Validators.pattern("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}$")]],
})

}

Bolter

Answer 3

i had the same issue., for me it was

i declared the form in component.ts

 studentform: FormGroup = this._fb.group({})

and in component.html i used

     <form [formGroup]="studentForm" (ngSubmit)="onSubmit()">

ie., i html i used camerlCased variable name it .ts file i initialized variable name with all small letters

please make sure are you using same form name in component.html and component.ts

Storms

Answer 4

from your code

this.MyForm= this.formbuilder.group({
    firstName: new FormControl("", Validators.maxLength(100)),
    lastName: new FormControl("",Validators.maxLength(100)),
});

put this code above inside your constructor, like this....

constructor( private formbuilder: FormBuilder) {
    this.MyForm= this.formbuilder.group({
        firstName: new FormControl("", Validators.maxLength(100)),
        lastName: new FormControl("",Validators.maxLength(100)),
    });
 }

Infect