TypeScript is an open-source and free programing language built on JavaScript. It is basically a superset of JavaScript with added syntax. TypeScript is compiled as well as an object-oriented language that is developed by Microsoft. It has provided a lot of ease to programmers to design their projects for websites. It has frameworks that are obviously designed to make programming simpler. Angular is a web framework that helps programmers build desktop and mobile applications. Angular is a worldwide accepted framework for creating programs. When you are working with Angular, you may experience “formgroup expects a formgroup instance please pass one in”.
Sometimes the problem seems quite tough to get through, but in reality, it is not that complex. There is always a solution to every error. As you are here to solve the error, we provide you with a valuable solution. Check out how the error pops up
How do you get the error warning?
When you try to work on the angular reactive form using Angular 2, you get the following error
Error: formGroup expects a FormGroup instance. Please pass one in.The program script that results in the error warning is:
HTML form
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<div id="user-data">
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
formControlName="username"
class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
formControlName="email"
class="form-control">
</div>
<div class="radio" *ngFor="let gender of genders">
<label>
<input
type="radio"
class="form-control"
formControlName="gender"
[value]="gender">{{ gender }}
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div>The TS file used
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
genders = ['male', 'female'];
// property to hold the form
sigupForm: FormGroup;
ngOnInit() {
// initialize the form before rendering the template
// hence 'OnInit' because this gets executed before the template is rendered// pass js object
// {} tells this form doesn't has any 'controls'
// 'controls' are key-value pairs to the overall form group
this.sigupForm = new FormGroup({
// form controls
// arg1 - intial state/value of this control
// arg2 - single validator or an array of validators
// arg3 - async validators
'username': new FormControl(null),
'email': new FormControl(null),
'gender': new FormControl('male')
});
}
onSubmit() {
console.log(this.sigupForm);
}
}You may have not seen the Gender field whereas the Email and Username field is shown in the output.
The Solution to Handle the Error “formgroup expects a formgroup instance please pass one in”
You receive the error message when the instance in the FormGroup doesn’t exit or rather says you forget to create it. Missing an instance from the FormGroup declared in the template, SignupForm.
In order to fix the error, an instance needs to be created for Signup. Follow the below code
this.signupForm = new FormGroup({
// form controls
// arg1 - intial state/value of this control
// arg2 - single validator or an array of validators
// arg3 - async validators
'username': new FormControl(null),
'email': new FormControl(null),
'gender': new FormControl('male')
});It resolves the error.
Conclusion
We have discussed the solution to help you fix the error warning “formgroup expects a formgroup instance please pass one in” in an efficient way.
I really hope you find it useful!
If you need any assistance, feel free to type a message below. We would love to help you!