我正在尝试设置一个表单,该表单将具有使用JSON文件中的数据动态创建的行。但是可以更改该数据,然后在提交记录时更改了哪一行和什么值。我正在使用表单构建器和表单数组以及表单组。
我尝试仅使用表单组,但未在多行上记录更改。我浏览了stackoverflow,找不到如何将表单数组与现有数据一起使用的好例子。
HTML
<form class="quantities" [formGroup]="changes">
<mat-card class="dpc-item-list"
*ngFor="let item of category.items; let newItem of aliases.controls; let i = index" formArrayName="items">
<div class="dpc-item-list" [formGroupName]="i">
<mat-form-field class="dpc-item description pink">
<input matInput value="{{ item.item_desc }}" formControlName="description" readonly>
</mat-form-field>
<mat-form-field class="dpc-item quantity">
<input matInput value="{{ item.open_qty }}" formControlName="open_qty">
</mat-form-field>
<mat-form-field class="dpc-item hold">
<input matInput value="{{ item.hold_qty }}" formControlName="hold_qty">
</mat-form-field>
<mat-form-field class="dpc-item item-num">
<input matInput value="#{{ item.item_num }}" formControlName="item_num" readonly>
</mat-form-field>
<mat-form-field class="dpc-item comments">
<input matInput formControlName="comments">
</mat-form-field>
Component
getDpcItems() {
return this.formBuilder.group({
description: [""],
open_qty: [""],
hold_qty: [""],
comments: [""],
item_num: [""]
});}
ngOnInit() {
this.changes = this.formBuilder.group({
items: this.formBuilder.array([this.getDpcItems()])
});
}
正试图充分利用数据,并在提交表单时记录所有更改。