how to display object value in typescript

Question

How to display object value in forms in angular. In browser developer tools I am getting the object and its values fine. But can't populate the values in the form.

In *.ts file i got:

console.log(this.product),              // {"productId": "3", "productName": "G500 cpu", "productDescription": "gaming computer", "productCategory": "computers", "units": 5 }
this.updateForm.patchValue({
        // productId: '23128',                // display 23128
        //   productName: 'asdas',            // display asdas
        productId: this.product.productId,    // doesnt display anything
        productName: this.product.productName // doesnt display anything
        // productId: this.product,    // display [object Object]
        // productName: this.product // display [object Object]
      })

in *.html I got:

    <form [formGroup]="updateForm">
      <div class="form-group">
        <input
        type="text"
        class="form-control"
        formControlName="productId">
      </div>
      <div class="form-group">
        <input
          type="text"
          class="form-control"
          formControlName="productName"
        />
      </div>

Answer 1

Instead of assigning each control value patch whole value of product object, just make sure form control name and object variable name should be matched.

stackblitz example

this.updateForm = this.formBuilder.group({
      productId: new FormControl(''),
      productName: new FormControl(''),
      productDescription: new FormControl(''),
      productCategory: new FormControl(''),
      units: new FormControl('')
    });
    
    var product = {
      productId: "3",
      productName: "G500 cpu",
      productDescription: "gaming computer",
      productCategory: "computers",
      units: 5 
    };
    this.updateForm.patchValue(product);