FormArray中FormArray的角度问题

Question

我正在Angular中开发一个动态Form。另一个数组中应该有一个数组。

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

[找不到路径为'gruppen->0->prueffolge'][1]的控件我有一个这样的对象结构：

"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时，总是使用一个"吸气剂"；以获取formArray。如果我们有一个formArray的formArray，我们就不能使用一个"；吸气剂"；否则是具有索引的函数

所以你有

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

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

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

Answer 3

更新：check@akotech comment

---

问题是您需要将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);
}