Issue with FormArray within another FormArray in Angular

Question

Issue with FormArray within another FormArray in Angular

I've been tackling a challenging task involving a dynamic Form in Angular where an array needs to be nested within another array.

However, I've encountered an issue with my form that throws the following error:

[Cannot find control with path: 'gruppen -> 0 -> prueffolge'][1] Outlined below is the object structure I'm working with:

"pruefplanTemplate": {
  "gruppen": [
      "prueffolge": 100,
      "name": "test",
      "pruefungen": [
        "..": "",
        "..": ""
      ]
  ]
}

This is my code snippet: Component:

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

@Component({
  selector: 'app-pruefplan-template',
  templateUrl: './pruefplan-template.component.html',
  styleUrls: ['./pruefplan-template.component.scss']
})
export class PruefplanTemplateComponent implements OnInit {
  // Code logic here
}

Template:

<h3>Prüfplan erstellen:</h3>
<p>{{this.gruppen.length}}</p>
// HTML template structure here

Model:

export interface PruefplanTemplate {
    gruppen: Gruppe[];
}

export interface Gruppe {
    // Interface definition
}

export interface Pruefung {
    // Interface definition
}

I could use some guidance from those more experienced with FormArray!

Appreciate your assistance! [1]: https://i.sstatic.net/hEAGL.png

angular typescript formarray

Answer 1

Answer №1

Whenever utilizing a FormArray, it is important to always use a "getter" to retrieve the formArray. If we have a formArray of FormArray, we cannot use a "getter" and must instead use a function with an index.

Therefore, you should have

get groups()
{
    return this.form.get("groups") as FormArray;
}

getTests(index:number)
{
   return this.groups.at(index).get('tests') as FromArray
}

Now, as per usual,

<form [formGroup]="form">
  <div formArrayName="groups">
     <div *ngFor="let group of groups.controls; let i=index" [formGroupName]="i">
         <input formControlName="testSequence">
         ....
 
         <!-- Note that the constructor for the inner part is the same
             but we use getTests(i) -->
         <div formArrayName="tests">
             <div *ngFor="let group of getTests(i).controls; let j=index" 
                                                              [formGroupName]="j">
                <input formControlName="description">
                 ....
             </div>
         </div>
     </div>
  </div>
</form>

Answer 2

Whenever utilizing a FormArray, it is important to always use a "getter" to retrieve the formArray. If we have a formArray of FormArray, we cannot use a "getter" and must instead use a function with an index.

Therefore, you should have

get groups()
{
    return this.form.get("groups") as FormArray;
}

getTests(index:number)
{
   return this.groups.at(index).get('tests') as FromArray
}

Now, as per usual,

<form [formGroup]="form">
  <div formArrayName="groups">
     <div *ngFor="let group of groups.controls; let i=index" [formGroupName]="i">
         <input formControlName="testSequence">
         ....
 
         <!-- Note that the constructor for the inner part is the same
             but we use getTests(i) -->
         <div formArrayName="tests">
             <div *ngFor="let group of getTests(i).controls; let j=index" 
                                                              [formGroupName]="j">
                <input formControlName="description">
                 ....
             </div>
         </div>
     </div>
  </div>
</form>

Answer 3

Answer №2

To utilize the individual pruefungen formArray from the grouppeForm local property, you would need to access it like this:

 <ng-container *ngFor="let pruefschritt of gruppeForm.get('pruefungen').controls;
    let j = index">
  ....
 </ng-container>

Answer 4

To utilize the individual pruefungen formArray from the grouppeForm local property, you would need to access it like this:

 <ng-container *ngFor="let pruefschritt of gruppeForm.get('pruefungen').controls;
    let j = index">
  ....
 </ng-container>

Answer 5

Answer №3

Just In: take a look at the input from @akotech

The main issue lies in specifying pruefungen as a FormArray rather than a ForControl, as demonstrated below:

addPruefplanGruppe() {
    const gruppeForm = this.fb.group({
      prueffolge: [100, Validators.required],
      name: ['', Validators.required],
      pruefungen: this.fb.array([]). // <---- pay attention to this line
    });

    this.gruppen.push(gruppeForm);
  }

Answer 6

Just In: take a look at the input from @akotech

The main issue lies in specifying pruefungen as a FormArray rather than a ForControl, as demonstrated below:

addPruefplanGruppe() {
    const gruppeForm = this.fb.group({
      prueffolge: [100, Validators.required],
      name: ['', Validators.required],
      pruefungen: this.fb.array([]). // <---- pay attention to this line
    });

    this.gruppen.push(gruppeForm);
  }

Issue with FormArray within another FormArray in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to incorporate TypeScript type definitions into a JavaScript module without fully transitioning to TypeScript?

The use of a variable occurs prior to it being assigned through the fetch operation

What is the best way to insert values from an array into a row?

Explore a vast array of items in a collection

Retrieving image data from an HTML element within an Angular app and then transmitting it to a REST server

Enhancing Error Handling in Node.js with TypeScript Typing

Sending an email using Angular is a straightforward process that involves utilizing the built

Using Typescript with React to pass a class as an argument to an external function

Guide on accessing model or view variables in Angular 4 to enable bidirectional data binding

Angular2 Collaborative Module

How can Vue Router be integrated with Vue.JS SSR?

Securely connecting Angular front end with NodeJS backend server using HTTPS encryption

Apply the functionality of a method() from component A to component B

The error message in TypeScript is indicating that the property 'x' is not found in the type '{}', which is required for a computed key

The Sharepoint web part or react app is encountering an error where it is unable to find the property 'show' within the type 'Readonly<{}>'

Changing the positions of objects on a resized HTML Canvas

Merging classes from several files into a unified namespace in typescript

TSConfig - Automatically Generates a ".js" File for Every ".ts" File

Having difficulty transmitting data through SocketIO in NodeJS

"Recurring issue of service methods triggering multiple times with the implementation of the updated createEffect pattern in Ngrx