Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask question.(5)

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

ITtutoria

ITtutoria Logo ITtutoria Logo

ITtutoria Navigation

  • Python
  • Java
  • Reactjs
  • JavaScript
  • R
  • PySpark
  • MYSQL
  • Pandas
  • QA
  • C++
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Python
  • Science
  • Java
  • JavaScript
  • Reactjs
  • Nodejs
  • Tools
  • QA
Home/ Questions/''formgroup expects a formgroup instance please pass one in''- How can I circumvent the error?
Next
Answered
frankieturner
  • 2
frankieturner
Asked: July 3, 20222022-07-03T06:40:17+00:00 2022-07-03T06:40:17+00:00In: Error

”formgroup expects a formgroup instance please pass one in”- How can I circumvent the error?

  • 2

. Advertisement .

..3..

. Advertisement .

..4..

I am new to Angular 2 and unable to resolve this issue ”formgroup expects a formgroup instance please pass one in”.

I’m only beginning to understand about angular reactive forms, and I want to try the first example but I’m having trouble.

This is the 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>

And here is the TS file:

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);
 }
}

I can see the Username and Email fields in the output, but not the Gender field.

I appreciate any help from you.

  • 1 1 Answer
  • 768 Views
  • 0 Followers
  • 0
Answer
Share
  • Facebook
  • Report

1 Answer

  • Voted
  • Oldest
  • Recent
  • Random
  1. Best Answer
    hdtutoria Expert
    2022-07-03T06:45:21+00:00Added an answer on July 3, 2022 at 6:45 am

    The cause: This error happens because you forgot creating an instance for the FormGroup defined in your template which is signupForm

    Solution: To fix the error, you have to create an instance for signupForm like the following:

    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')
    });
    • 0
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

Sidebar

Ask A Question
  • How to Split String by space in C++
  • How To Convert A Pandas DataFrame Column To A List
  • How to Replace Multiple Characters in A String in Python?
  • How To Remove Special Characters From String Python

Explore

  • Home
  • Tutorial

Footer

ITtutoria

ITtutoria

This website is user friendly and will facilitate transferring knowledge. It would be useful for a self-initiated learning process.

@ ITTutoria Co Ltd.

Tutorial

  • Home
  • Python
  • Science
  • Java
  • JavaScript
  • Reactjs
  • Nodejs
  • Tools
  • QA

Legal Stuff

  • About Us
  • Terms of Use
  • Privacy Policy
  • Contact Us

DMCA.com Protection Status

Help

  • Knowledge Base
  • Support

Follow

© 2022 Ittutoria. All Rights Reserved.

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.