使用 formarray 在反应形式中创建 editable mat-table

Question

我最近一直在创建一个非常大的表单。它主要有简单的文本字段，但其中有很多，另外还有一个子对象数组。从后端（Django Rest Framework）我收到这个作为具有嵌套位置的对象。这些子对象应该显示在 editable 和 validatable mat-table 中，带有 mat-form-fields.

这是模型的一部分：

export class Auftrag{ // <-- parent
  auftrag: number = null;
  bezeichnung: string = '';
  datum: Date = null;
  ueberwachen: boolean = null;
  erl: boolean = null;
  [...]
  auftragposition:Array<AuftragPosition> = null;  //<-- children
}

export class AuftragPosition {
  id: number = null;
  auftrag: number = null;
  position: number = null;
  menge: number = null;
  einheit: string = "";
  beschreibung: string = "";
  teil_nr: string = "";
  artikel: string = ""
  ep: number = null;
  rabatt: number = null;
 }

单个文本字段用作反应式表单字段，我创建如下（因为确实有很多字段），并且有效：

this.auftragForm = this.fb.group(new Auftrag()); //fb is a formbuilder

我这样做的原因是因为我必须在 django 中编写大模型，然后在 anguilar 中，我不想在创建表单时再次编写所有这些。它还创建了字段"auftragposition"，它（在日志中检查过）是一个包含多个对象（auftragposition）的数组。这些应该显示在 mat-table 中。 mat-table 是一个不同的子组件，所以我传递如下形式：

在父组件中（auftragdetail.component.html）：

<app-auftragposition [parentFormGroup]="auftragForm"></app-auftragposition>

在 mat-table 组件中 (auftragposition.component.ts):

@Input() parentFormGroup: FormGroup;

在auftragposition.comopnent.html中：

<div class="auftragposition" [formGroup]="parentFormGroup">
    <mat-table class="auftragposition-table mat-elevation-z8" formArrayName="auftragposition" [dataSource]="dataSource"
            matSort matSortActive="position" matSortDirection="desc" matSortDisableClear> [...]

这里的问题是数据源。这有点令人困惑，因为 mat-fields 不需要数据源——它们通过表单来填充。我知道我可以输入一个简单的数组作为数据源。我制作了一个模拟数组并显示了数据。但是 1) 我不能从反应形式中得到一个数组（用 .get('') 和 .value 尝试了很多东西）和 2) 我认为它不会连接到反应形式并传递数据当我提交时返回...

也许问题是我如何创建我的反应形式。据我所知，mat-table 需要一个表格数组，其中填充了一个表格组作为行。也许我简单地传入对象的方式并没有创建真正的formarray。

我还可以找到这个 stackblitz，有人在其中写了一个特殊的数据源（我必须在这里做），但它并没有真正帮助我，因为它没有填充示例中的现有数据： some Stackblitz example

如有任何提示，我将不胜感激。

Answer 1

刚刚回到这个问题上 - 这真的很简单。您可以只使用 formArray 作为数据源。确保首先将其转换为 FormArray，否则它将保持为 AbstractControl。

dataSource = (this.yourForm.controls.yourFormArray as FormArray).value)

使用 formarray 在反应形式中创建 editable mat-table

Create editable mat-table inside reactive form with formarray

django-rest-framework

angular-material

angular

angular-reactive-forms

mat-table