I can't get object values in the form to edit/update. getting this error:

ERROR TypeError: Cannot read properties of undefined (reading 'productName')
    at UpdateProductComponent.ngOnInit (update-product.component.ts:63:33)
    at callHook (core.mjs:2576:22)
    at callHooks (core.mjs:2545:17)
    at executeInitAndCheckHooks (core.mjs:2496:9)
    at refreshView (core.mjs:11622:21)
    at refreshEmbeddedViews (core.mjs:12812:17)
    at refreshView (core.mjs:11631:9)
    at refreshComponent (core.mjs:12858:13)
    at refreshChildComponents (core.mjs:11348:9)
    at refreshView (core.mjs:11657:13)

in my productservice.ts I got :

  getProductById(id: number){
    return this.http.get<Product>(`${this.baseUrl}/getProductById/${id}`);
  }

which i was able to get the id/productId fine,

In my main component I was able to redirect to new page/UpdateProductComponent fine with this:

updateproduct = (productId: any) => {
  this.router.navigateByUrl('/updateproduct',  productId)
};

in my UpdateProductComponent i got this :

  product: IProduct;
  id: any;

  ngOnInit() {

    this.id = this.route.snapshot.paramMap.get('id');
this.productService.getProductById(this.id).subscribe((data: Product)=>{
            this.product = data;
      console.log(this.product),              // retrieves the data fine
      this.updateForm.patchValue({
        // productId: this.id,                // works 
        //   productName: 'asdas',            // works 
        productId: this.product.productId,    // doesnt work
        productName: this.product.productName // doesnt work
      })
    });
  }

I can verify data is retrieved fine in network tab > under payload for that product as well in this format: [{"productId":"2","productName":"23123","productDescription":"wqeq","productCategory":"qewqweq","units":23}]

*** Upadte *** after updating my service to Observable I am not getting the error but the values are still not getting populated

CodePudding user response：

Try to change this in your service

getProductById(id: number): Observable<Product> {
   return this.http.get<Product>(`${this.baseUrl}/getProductById/${id}`);
}

CodePudding user response：

Your attached JSON response is a Product array.

[{"productId":"2","productName":"23123","productDescription":"wqeq","productCategory":"qewqweq","units":23}]

While the service is expected to receive and return a single Product item.

Modify the getProductById in ProductService to return the Observable of Product item by getting the first item from the array via rxjs .map().

import { map, Observable } from 'rxjs';

getProductById(id: number): Observable<Product> {
  return this.http.get<Product[]>(`${this.baseUrl}/getProductById/${id}`)
    .pipe(map((response: Product[]) => response[0]));
}

Sample StackBlitz Demo

With this fix, it will fix why you can't bind the value getting from the API response to the form controls as mentioned in previous question.

Note:

this.updateForm.patchValue({
  productId: this.product.productId,
  productName: this.product.productName,
});

replaces with:

this.updateForm.patchValue(this.product);

as discussed in previous question.