Angular subscribe data to show in Form UI

Question

I try to pass this item details to form. But I don't undefined for this.itemDetails.item1Qty etc. I want to show in Form 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

You cannot directly assign the itemDetails value when initializing/building form as itemDetails data only returned during the subscription.

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

---

Solution

Instead, you should do the below steps:

(1): Remove initialize itemDetails when building form

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

(2) In the subscription event, update the form with the value via 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);
});

Sample Solution on StackBlitz

---

References

Updating parts of the data model