FormArray在FormArray中的角度问题

Question

我正在研究一个角度的动态形式。另一个数组中应该有一个数组。

但我的表单出现了问题，出现了以下错误：

无法找到带有path的控件：'gruppen -> 0 -> prueffolge‘我有这样的对象结构：

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

这是我的代码:组件：

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

模板：

<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>

型号：

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

我希望有人比我有更多的FormArray经验！

谢谢你们！1：https://i.stack.imgur.com/hEAGL.png

Answer 1

当我们使用FormArray时，总是使用"getter“来获得formArray。如果我们有一个formArray of FormArray，就不能使用带有索引的"getter“函数。

所以你有

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

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

现在是“一如既往”

<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>

Answer 2

更新：请查看@akotech评论

问题是，您需要将pruefungen定义为FormArray而不是ForControl，如下所示：

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

    this.gruppen.push(gruppeForm);
  }

Answer 3

可以从formArray本地属性访问单个pruefungen formArray。

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