formGroup expects a FormGroup instance

Question

I have an Angular 2 RC4 basic form example on Plunkr that appears to throw the following error (In Chrome DEV console)

Here's the plunkr

https://plnkr.co/edit/GtPDxw?p=preview

Error:

browser_adapter.ts:82 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./App class App - inline template:1:7
ORIGINAL EXCEPTION: formGroup expects a FormGroup instance. Please pass one in.
           Example: <form [formGroup]="myFormGroup">

ORIGINAL STACKTRACE:
Error: formGroup expects a FormGroup instance. Please pass one in.
           Example: <form [formGroup]="myFormGroup">

    at new BaseException (https://npmcdn.com/@angular/[email protected]/src/facade/exceptions.js:27:23)
    at FormGroupDirective._checkFormPresent (https://npmcdn.com/@angular/[email protected]/src/directives/reactive_directives/form_group_directive.js:110:19)
    at FormGroupDirective.ngOnChanges (https://npmcdn.com/@angular/[email protected]/src/directives/reactive_directives/form_group_directive.js:39:14)
    at DebugAppView._View_App0.detectChangesInter

Tifanie

Answer 1

There are a few issues in your code

• <div [formGroup]="form"> outside of a <form> tag
• <form [formGroup]="form"> but the name of the property containing the FormGroup is loginForm therefore it should be <form [formGroup]="loginForm">
• [formControlName]="dob" which passes the value of the property dob which doesn't exist. What you need is to pass the string dob like [formControlName]="'dob'" or simpler formControlName="dob"

Plunker example

Inhalation

Also this might happens when you haven't create form in .ts file. – Underestimate

or if you are creating dynamically – Sibley

Or the name is case sensitive in HTML or in ts – Posner

This might happens if ngOnInit() has 'await' , so in this case you have to define the form group in the constructor – Homophonic

Answer 2

I was facing this issue and fixed by putting a check in form attribute. This issue can happen when the FormGroup is not initialized.

<form [formGroup]="loginForm" *ngIf="loginForm">
OR
<form [formGroup]="loginForm" *ngIf="this.loginForm">

This will not render the form until it is initialized.

Salley

Just remove this if someone copying it. I had to ues ngOnInit() method to avoid this – Turpitude

@amrography I couldn't get you. can you please explain bit more. Thanks – Salley

just edit this part *ngIf="this.loginForm" to be *ngIf="loginForm" – Turpitude

This was just what I needed as well. :) – Carincarina

Answer 3

I was using reactive forms and ran into similar problems. What helped me was to make sure that I set up a corresponding FormGroup in the class. Something like this:

myFormGroup: FormGroup = this.builder.group({
    dob: ['', Validators.required]
});

Durnan

Answer 4

I had a the same error and solved it after moving initialization of formBuilder from ngOnInit to constructor.

Williswillison

Answer 5

I had the same error and I solvit removing the async await pattern from it:
orginal code

async ngOnInit()
{
  this.id = await this.route.snapshot.paramMap.get('id');

working code

ngOnInit()
{
  this.id = this.route.snapshot.paramMap.get('id');

I think might be related to @johannesMatevosyan answer just above. I really don't know why, but is working for me.

Delicacy

Answer 6

I had this error when I had specified fromGroupName instead of formArrayName.

Make sure you correctly specify if it is a form array or form group.

<div formGroupName="formInfo"/>

<div formArrayName="formInfo"/>

Trudytrue

Answer 7

Problem Code:

In your HTML file:

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

In your TS file:

public myForm!: FormGroup;
public myFormm!: any;

constructor(private formBuilder: FormBuilder) { 
    this.myFormm = this.formBuilder.group({
        firstName: ['',Validators.required]
    });
}

Solution Code:

Please Make sure that Your form name in HTML and in TS file both are same or not!!

In your HTML file:

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

In your TS file:

public myForm!: FormGroup;

constructor(private formBuilder: FormBuilder) { 
    this.myForm = this.formBuilder.group({
        firstName: ['',Validators.required]
    });
} 

Chyme