Nested angular forms can't find FormGroup

Question

I've got the template under *ngIf and it only generates after the form is loaded. Additionally, I've got the failing form under a dynamically displayed field, which depends on a button press. I log out the form, and it returns the FormControl which is missing correctly.

Template:

<div *ngIf="ready">
 <form [formGroup]="form">
        <div [formGroup]="form.controls.request">
          <div *ngFor="let field of inputFields">
            ...
          </div>
        </div>

        <div *ngIf="somethingEnabled">
          <div [formGroup]="form.controls.Something">
            <div class="input-container">
              <label>Name: </label>
              <input formControlName="Name">
            </div>

            <div [formGroup]="form.controls.Something.Organization">

              <div class="input-container">
                <label>ASD: </label>
                <input formControlName="ASD">
              </div>

              <div [formGroup]="form.controls.Something.Organization.Other">
                <div class="input-container">
                  <label>Id: </label>
                  <input formControlName="Id">
                </div>

                <div [formGroup]="form.controls.Something.Organization.Other.SchmeNm">

                  <div class="input-container">
                    <label>SchmeName: </label>
                    <input formControlName="SchmeName">
                  </div>

                  <div class="input-container">
                    <label>SchmeValue: </label>
                    <input formControlName="SchmeValue">
                  </div>

                </div>
              </div>
            </div>

          </div>
        </div>
      </form>
    </div>

code:

 generateForm() {
    this.form = this.fb.group({
      request: this.fb.group(
        this.generateRequestFields())
      ,
      Something: this.fb.group(this.generateSomething()),
      address: this.fb.group(
        this.generateAddress()
      )
    });
  }

  generateSomething() {
    const returnObject = {};
    returnObject['Name'] = new FormControl();
    returnObject['Organization'] = this.fb.group(this.generateOrganization());
    return returnObject;
  }

  generateOrganization() {
    const returnObject = {};
    returnObject['ASD'] = new FormControl();
    returnObject['Other'] = this.fb.group({
      Id: new FormControl(),
      Schme: this.fb.group({
        SchmeName: new FormControl(),
        ShcmeValue: new FormControl()
      }),
      Issr: new FormControl()
    });
    return returnObject;
  }

I only get the error when activating the form.controls.something part. It works fine if I remove form.controls.Something.Organization part of the template.

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

I might have just missed something, and was hoping I'll find it while posting this, but still can't seem to get it

ChadESmith42 · Accepted Answer · 2019-03-27 13:52:44Z

1

For nested formGroups, use formGroupName not formGroup.

answered Mar 27, 2019 at 13:52

ChadESmith42

531 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ChadESmith42 Over a year ago

@TomasKsnauskas If my answer helped you solve this, please consider accepting the answer as correct. Thanks!

Manzur Khan · Accepted Answer · 2018-04-12 14:14:13Z

0

When you are inside a formGroup you don't need to access the controls of the parents form to define it's child form group, you can just use the name

<form [formGroup]="form">
        <div [formGroup]="request">
          <div *ngFor="let field of inputFields">
            ...
          </div>

answered Apr 12, 2018 at 14:14

Manzur Khan

2,5164 gold badges26 silver badges46 bronze badges

2 Comments

Tomas Kasnauskas Over a year ago

I get this.form._updateTreeValidity is not a function if i remove the nesting

Manzur Khan Over a year ago

This might be helpful: stackoverflow.com/questions/40898056/…

major sam · Accepted Answer · 2018-10-19 13:30:02Z

Probably if you console.log(this.form.controls.Something.Organization) it will also return undefined. For every FormGroup you add, you have to access its controls first and then move on to the next level, as in:

<div [formGroup]="form.controls.Something.controls.Organization">
 ...
   <div [formGroup]="form.controls.Something.controls.Organization.controls.Other">
    ...

Try it. If it doesn't work (can't access Something), also try:

<div [formGroup]="form.get("Something").get("Organization")">

form.controls will browse through the exact path you define, while form.get will go to the exact control you specify, making it useful for multilayered forms for ease of maintenance and reading.

Let us know what you get.

Collectives™ on Stack Overflow

Nested angular forms can't find FormGroup

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related