Angular problem with FormArray in FormArray

Question

I am working on a dynamic Form in Angular. There should be an array in another array.

But it has a problem with my form and the following error appears:

[Cannot find control with path: 'gruppen -> 0 -> prueffolge'][1] I have a object structure like this:

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

This is my code: 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 {
  form = this.fb.group({
    gruppen: this.fb.array([
      new FormGroup({
        pruefungen: this.fb.array([])
      })
    ])
  });

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
  }

  get gruppen() {
    return this.form.controls["gruppen"] as FormArray;
  }

  addPruefplanGruppe() {
    const gruppeForm = this.fb.group({
      prueffolge: [100, Validators.required],
      name: ['', Validators.required],
      pruefungen: [[]]
    });

    this.gruppen.push(gruppeForm);
  }

  deleteGruppe(gruppenIndex: number) {
    this.gruppen.removeAt(gruppenIndex);
  }

  getPruefung(index: number, control: any): AbstractControl[] {
    var pruefungen = control[index].controls;
    return pruefungen;
  }

  addPruefschritt(index: number, gruppe: any) {
    var formArray = gruppe.controls['pruefungen'] as FormArray;

    const pruefschrittForm = this.fb.group({
      beschreibung: ['', Validators.required],
      erledigt: [false, Validators.required],
      reaktion: ['', Validators.required],
      bemerkung: ['', Validators.required]
    });

    this.getPruefung(index, gruppe).push(pruefschrittForm);
  }
}

Template:

<h3>Prüfplan erstellen:</h3>
<p>{{this.gruppen.length}}</p>
<div class="add-lessons-form" [formGroup]="form">
    <ng-container formArrayName="gruppen">
        <ng-container *ngFor="let gruppeForm of gruppen.controls; let i = index">
            <div class="lesson-form-row" [formGroupName]="i">
                <mat-form-field appearance="fill">
                    <input matInput formControlName="prueffolge" placeholder="Prüffolge">
                </mat-form-field>
                <mat-form-field appearance="fill">
                    <input matInput formControlName="name" placeholder="Name">
                </mat-form-field>
                <mat-icon class="delete-btn" (click)="deleteGruppe(i)">delete_forever</mat-icon>

                <ng-container formArrayName="pruefungen">
                    <ng-container *ngFor="let pruefschritt of getPruefung(i, gruppeForm); let j = index">
                        <div class="pruefschritt-form-row" [formGroupName]="j">
                            <mat-form-field appearance="fill">
                                <input matInput formControlName="beschreibung" placeholder="Beschreibung">
                            </mat-form-field>
                            <mat-form-field appearance="fill">
                                <input matInput formControlName="erledigt" placeholder="Erledigt"> //TODO: Boolean
                            </mat-form-field>
                            <mat-form-field appearance="fill">
                                <input matInput formControlName="reaktion" placeholder="Reaktion">
                            </mat-form-field>
                            <mat-form-field appearance="fill">
                                <input matInput formControlName="bemerkung" placeholder="Bemerkung">
                            </mat-form-field>
                        </div>
                    </ng-container>
                </ng-container>
            </div>

            <button mat-mini-fab (click)="addPruefschritt(i, gruppeForm);">
                Prüfschritt
                <mat-icon class="add-course-btn">add</mat-icon>
            </button>
        </ng-container>
    </ng-container>

    <button mat-mini-fab (click)="addPruefplanGruppe();">
        Gruppe
        <mat-icon class="add-course-btn">add</mat-icon>
    </button>
</div>

Model:

export interface PruefplanTemplate {
    gruppen: Gruppe[];
}

export interface Gruppe {
    prueffolge: number;
    name: string;
    pruefungen: Pruefung[];
}

export interface Pruefung {
    beschreibung: string;
    erledigt: boolean;
    reaktion: string;
    bemerkung: string;
}

I hope someone has more experience with FormArray than me!

Thank you guys! [1]: https://i.sstatic.net/hEAGL.png

This specific error you are having is because when you initialize the form property, that first group you're manually adding only has the pruefungen control, so its missing both name and prueffolge controls, being the latter the one showing up in the error. — akotech
– akotech, Commented Aug 25, 2022 at 8:15

Eliseo · Accepted Answer · 2022-08-25 08:10:14Z

2

When we use a FormArray, always use a "getter" to get the formArray. If we has a formArray of FormArray, we cannot use a "getter" else a function with an index

So you has

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

getPruefungen(index:number)
{
   return this.gruppen.at(index).get('pruefungen') as FromArray
}

Now is "as always"

<form [formGroup]="form">
  <div formArrayName="gruppen">
     <div *ngFor="let group of gruppen.controls;let i=index" [formGroupName]="i">
         <input formControlName="prueffolge">
         ....
 
         <!--see that it's the same constructor for the inner
             but use getPruefungen(i) -->
         <div formArrayName="pruefungen">
             <div *ngFor="let group of getPruefungen(i).controls;let j=index" 
                                                              [formGroupName]="j">
                <input formControlName="beschreibung">
                 ....
             </div>
         </div>
     </div>
  </div>
</form>

answered Aug 25, 2022 at 8:10

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

2 Comments

Marci Over a year ago

Oh thank you sir. @Elisea That helped! But there is still this error: Cannot find control with path: 'gruppen -> 0 -> prueffolge' And when initial loading it always puts one element into it ... thats a bit weird.

Marci Over a year ago

akotech's comment helped my also. Thanks!

Chellappan வ · Accepted Answer · 2022-08-25 08:40:38Z

0

You can access individual pruefungen formArray from grouppeForm local property

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

answered Aug 25, 2022 at 8:40

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Comments

Ashot Aleqsanyan · Accepted Answer · 2022-08-25 08:53:47Z

0

Update: check @akotech comment

The problem is that you need to define your pruefungen as a FormArray not ForControl, like this:

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

    this.gruppen.push(gruppeForm);
  }

edited Aug 25, 2022 at 8:53

answered Aug 25, 2022 at 8:10

Ashot Aleqsanyan

4,4732 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular problem with FormArray in FormArray

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related