formGroup expects a FormGroup instance
AngularAngular2 FormsAngular2 FormbuilderAngular Problem Overview
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/forms@0.2.0/src/facade/exceptions.js:27:23)
at FormGroupDirective._checkFormPresent (https://npmcdn.com/@angular/forms@0.2.0/src/directives/reactive_directives/form_group_directive.js:110:19)
at FormGroupDirective.ngOnChanges (https://npmcdn.com/@angular/forms@0.2.0/src/directives/reactive_directives/form_group_directive.js:39:14)
at DebugAppView._View_App0.detectChangesInter
Angular Solutions
Solution 1 - Angular
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 theFormGroup
isloginForm
therefore it should be<form [formGroup]="loginForm">
[formControlName]="dob"
which passes the value of the propertydob
which doesn't exist. What you need is to pass the stringdob
like[formControlName]="'dob'"
or simplerformControlName="dob"
Solution 2 - Angular
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.
Solution 3 - Angular
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]
});
Solution 4 - Angular
I had a the same error and solved it after moving initialization of formBuilder
from ngOnInit
to constructor.
Solution 5 - Angular
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"/>
Solution 6 - Angular
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.