Angular订阅数据以显示在表单UI中

Question

我尝试将这个项目的详细信息传递给表单。但我没有为this。itemdetails定义。item1Qty等等。我想在表单UI中显示。

this.wareHouseGroup = this.formBuilder.group({
id: this.formBuilder.control(this.warehouse.id),
sideId: this.formBuilder.control(this.warehouse.sideId.toString(), [
Validators.required,
Validators.min(1)
]),
itemDetail: this.formBuilder.group({
Item1Qty: this.formBuilder.control(this.itemDetails.item1Qty),
item2Qty: this.formBuilder.control(this.itemDetails.item2Qty),
item3Qty: this.formBuilder.control(this.itemDetails.item3Qty)
})
});
this.itemService.getItemDetails(this.item.uid).subscribe((result) => {
this.itemDetails = result != null ? result : null;
console.log(this.itemDetails);
});
here is the console log
{"id":117,"TypeId":1,"item1Qty":563,"item2Qty":3.00,"item3Qty":0,"itemType":"Discount"}

Answer 1

初始化/构建表单时不能直接赋值itemDetails，因为itemDetails数据只在订阅时返回。

itemDetail: this.formBuilder.group({
Item1Qty: this.formBuilder.control(this.itemDetails.item1Qty),
item2Qty: this.formBuilder.control(this.itemDetails.item2Qty),
item3Qty: this.formBuilder.control(this.itemDetails.item3Qty)
})

---

解决方案相反，您应该执行以下步骤:

(1):当创建表单时删除初始化itemDetails

itemDetail: this.formBuilder.group({
Item1Qty: this.formBuilder.control(''),
item2Qty: this.formBuilder.control(''),
item3Qty: this.formBuilder.control('')
})

(2)在订阅事件中，通过patchValue使用值更新表单。

this.itemService.getItemDetails(this.item.uid).subscribe(result => {
this.itemDetails = result != null ? result : null;
if (!result) return;
this.wareHouseGroup.controls['itemDetail'].patchValue({
Item1Qty: this.itemDetails.item1Qty,
item2Qty: this.itemDetails.item2Qty,
item3Qty: this.itemDetails.item3Qty
});
console.log(this.itemDetails);
});

StackBlitz的样例解决方案

引用

---

更新部分数据模型