Angular5 Reactive Forms: Nested Form Arrays

Question

Angular5 Reactive Forms: Nested Form Arrays

I'm currently facing a challenge with integrating a FormArray within another FormArray. I've been struggling to find a solution for this issue.

Here is the relevant part of my TypeScript file:

createForm() {
    this.myForm = this.formBuilder.group({
        people: this.formBuilder.array([
            { addresses: this.formBuilder.array([]) }
        ])
    });
}

In essence, I want to create a people FormArray where each individual can have multiple addresses. In my HTML, I attempt to represent it like so:

<div [formGroup]="myForm">
    <div formArrayName="people">
        <div *ngFor="let person of people.controls; let i=index">
            Person {{ i + 1 }}

            <div *ngFor="let address of person.addresses.controls; let j=index">
                Address {{ j + 1 }}
            </div>
        </div>
    </div>
</div>

This example is simplified, and my actual form will be more complex. My script includes an "Add person" link that triggers a function pushing an object to the people FormArray.

Upon calling createForm(), I encounter the following errors in the browser:

ERROR TypeError: this.form._updateTreeValidity is not a function
ERROR TypeError: this.form.get is not a function

Where did I make a mistake? How can I achieve what I intend to do? Any guidance would be greatly appreciated!

angular forms typescript angular5 angular-reactive-forms

Answer 1

Answer №1

If you're looking for an example, consider trying something similar to this:

Check out the StackBlitz example here

Here's the basic structure in HTML:

<form [formGroup]="myForm" (ngSubmit)="submit()">
    <div formArrayName="people">
        <div *ngFor="let person of getPeople(myForm); let i=index">
            <div style="margin: 5px;" [formGroupName]="i">
                <label>Person {{ i + 1 }}</label>
                <input type="text" placeholder="Name" formControlName="name">
                <button *ngIf="i<1" (click)="addPeople()" type="button">Add People</button>

                <div formArrayName="addresses">
                    <div *ngFor="let address of getAddress(person); let j=index">
                        <div [formGroupName]="j">
                            <span>Address {{ j + 1 }}</span>
                            <input type="text" placeholder="house No" formControlName="houseNo">
                            <input type="text" placeholder="city" formControlName="city">
                            <button *ngIf="j<1" (click)="addAddress(i)" type="button">+</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<div style="margin-top: 20px;">
    {{myForm.value | json}}
</div>

In TypeScript:

import { Component, OnInit } from '@angular/core';
import { FormArray, FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  survey: FormGroup;
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.myForm = this.fb.group({
      people: this.fb.array([this.createPeopleArray()])
    })
  }

  createPeopleArray() {
    return this.fb.group({
      name: null,
      addresses: new FormArray([
        this.createAddressArray()
      ])
    });
  }

  getPeople(form) {
    return form.controls.people.controls;
  }

  getAddress(form) {
    return form.controls.addresses.controls;
  }

  createAddressArray() {
    return this.fb.group({
      houseNo: null,
      city: null
    })
  }

  addPeople() {
    const control = <FormArray>this.myForm.get('people');
    control.push(this.createPeopleArray());
  }

  addAddress(i) {
    const control = <FormArray>this.myForm.get('people').controls[i].get('addresses');
    // console.log(control);
    control.push(this.createAddressArray());
  }

  submit() {
    console.log(this.myForm.value)
  }
}

Answer 2

If you're looking for an example, consider trying something similar to this:

Check out the StackBlitz example here

Here's the basic structure in HTML:

<form [formGroup]="myForm" (ngSubmit)="submit()">
    <div formArrayName="people">
        <div *ngFor="let person of getPeople(myForm); let i=index">
            <div style="margin: 5px;" [formGroupName]="i">
                <label>Person {{ i + 1 }}</label>
                <input type="text" placeholder="Name" formControlName="name">
                <button *ngIf="i<1" (click)="addPeople()" type="button">Add People</button>

                <div formArrayName="addresses">
                    <div *ngFor="let address of getAddress(person); let j=index">
                        <div [formGroupName]="j">
                            <span>Address {{ j + 1 }}</span>
                            <input type="text" placeholder="house No" formControlName="houseNo">
                            <input type="text" placeholder="city" formControlName="city">
                            <button *ngIf="j<1" (click)="addAddress(i)" type="button">+</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<div style="margin-top: 20px;">
    {{myForm.value | json}}
</div>

In TypeScript:

import { Component, OnInit } from '@angular/core';
import { FormArray, FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  survey: FormGroup;
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.myForm = this.fb.group({
      people: this.fb.array([this.createPeopleArray()])
    })
  }

  createPeopleArray() {
    return this.fb.group({
      name: null,
      addresses: new FormArray([
        this.createAddressArray()
      ])
    });
  }

  getPeople(form) {
    return form.controls.people.controls;
  }

  getAddress(form) {
    return form.controls.addresses.controls;
  }

  createAddressArray() {
    return this.fb.group({
      houseNo: null,
      city: null
    })
  }

  addPeople() {
    const control = <FormArray>this.myForm.get('people');
    control.push(this.createPeopleArray());
  }

  addAddress(i) {
    const control = <FormArray>this.myForm.get('people').controls[i].get('addresses');
    // console.log(control);
    control.push(this.createAddressArray());
  }

  submit() {
    console.log(this.myForm.value)
  }
}

Angular5 Reactive Forms: Nested Form Arrays

Answer №1

Similar questions

Troubleshooting problem with Angular ngx-bootstrap datepicker positioning on mobile devices

Node OOM Error in Webpack Dev Server due to Material UI Typescript Integration

Issue encountered while executing Angular 6 Single Page Application

Refresh the page in Angular2

environment variable process.env is not defined

How can you determine the number of times a particular digit appears around a specific position in a TypeScript array

Tips for effectively highlighting search text within HTML content without causing any issues

Encountering difficulties launching a simple Angular 2 application

Creating paths on-the-fly from GraphQL API within Nextjs

PHP constantly generates fresh sessions without fail

What is the process of transitioning a user from being able to select only one checkbox to having the ability to select multiple checkboxes in Angular?

ag-grid provides unique filter options for custom date filtering in Angular 2

Encountering a 'Uncaught SyntaxError: Unexpected Token <' error when deploying Angular2 on Heroku with all external references

The CORS policy specified in next.config.js does not appear to be taking effect for the API request

Using Iframe for WooCommerce integration and implementing Facebook login within an Ionic application

Stop a form submission if any of its input fields are missing required values

echarts line and area chart experiencing a scaling issue

define elements within feature modules

Outside the observable in Angular, there is a vacant array

What is the best way to retain an edited value within the same index without moving it to a different