array of Objects not retaining value when I update a field of the object it in angular

Question

array of objects is a form array ie products:formBuilder.array([]) I am trying to update an object . There are multiple products and the user has an option to update quantities. For example:

product1.quantity :2
product2.quantity :5

when the user clicks on update product quantity button for the first product , the quantity changes to 3, but when user tries to update the product2. the quantity of product2 gets updated to 6 , but the quantity of product1 changes back to 2.

UPDATE QUANTITY PRODUCT1:

product1.quantity:3
product2.quantity:5

UPDATE QUANTITY PRODUCT2:

product1.quantity:2
product2.quantity:6

I am unable to understand this behaviour. Here is the code snippet for your reference: .ts file code (function called on button click)

console.log(JSON.parse(JSON.stringify(this.productsinvoice.value)));
        this.productsinvoice.value.forEach(productInvoice => {
          if(productInvoice.productID === this.productID){
            productInvoice.quantity = this.product_quantity;
          }
        });
        console.log(JSON.parse(JSON.stringify(this.productsinvoice.value)));

HTML code

<div *ngFor="let product_details_tax of newrequest?.get('productsinvoice')['controls']; let i=index"
                                            [formGroupName]="i">
                                            <div class="row">
                                                <div class="form-group col formgroup_mar_bottom">
                                                    <label for="inputRate4">Product Name</label>
                                                    <input type="text" class="form-control" id="inputRate4"
                                                        formControlName='productname' placeholder="Enter Product Name">
                                                </div>
                                                <div class="form-group col formgroup_mar_bottom">
                                                    <label for="inputAmount">Quantity</label>
                                                    <input type="number" class="form-control" id="inputAmount4"
                                                        formControlName='quantity'
                                                        value={{product_details_tax.value?.quantity}}
                                                        placeholder="Enter Quantity">
                                                </div>

EDIT:

 this.productsinvoice.value = this.productsinvoice.value.map(productInvoice => {
      if(productInvoice.productID === this.productID){
         console.log(this.product_quantity);// prints the new quantity
         return {
             ...productInvoice,
             quantity: this.product_quantity
         }
      console.log(productInvoice)// logs new value of quantity
      }else{
          return productInvoice
      }
   });
   console.log(this.productsinvoice.value);//logs the object with old quantity.

When I use the spread operator, the quantity doesn't even get updated for the first time.

Answer 1

You can create a temp array and update values in that array and then call the setValue function

let tempArr = productsInvoice
loop through tempArr to update your value
productsInvoice.setValue(tempArr)

Answer 2

Try using spread operator to update product object.

   this.productsinvoice.value.forEach(productInvoice => {
      if(productInvoice.productID === this.productID){
         productInvoice = {
             ...productInvoice,
             quantity: this.product_quantity
         }
      }   
    });

Answer 3

use 2 way binding, so change value={{product_details_tax.value?.quantity}} to [(value)]="product_details_tax.value?.quantity"

this way you do not need to manually change the value, as the user changes the input value the model should change.

see explanation: https://www.javatpoint.com/two-way-data-binding-in-angular-8