Updating existing field value in Reactive formArray

Question

In this situation when I am pressing the Add button, the item object(item object have item name quantity, etc) values are displayed the table below

during I am adding the items to the table, some times there will have same item names. in that case, I want to update only the quantity by checking the item name, if there no same item names then it will add a new row or it already has the item name in the table want to update the only quantity. below you can see my code.also add method is dropDisplayValues() and credentials is the form array group value.

this.purchaseOrderGroup = this.formBuilder.group({
      categoryName: ['', Validators.required],
      quantity: [null, Validators.required],
      itemDetails: ['', Validators.required],
      itemName: [''],
      date: [''],
      itemId: [''],
      itemQty: [''],
      Avlqty: [''],
      supplierFirstName: ['', Validators.required],
      supplierLastName: ['', Validators.required],
      supplierId: ['', Validators.required],
      credentials: this.formBuilder.array([]),
    })


get f() {
return this.purchaseOrderGroup.controls;
}

dropDisplayValues() {

const itemId = this.f['itemId'].value;
const itemName = this.purchaseOrderGroup.controls['itemName'].value;
const qty = Number(this.f.quantity.value)
let AvlQty = this.f.Avlqty.value;
let final = AvlQty + qty;

if (qty !== 0 && itemId !== '' && itemName !== '') {

  const tableValue = this.formBuilder.group({
    itemId: this.f.itemId.value,
    itemName: this.f.itemName.value,
    qty: qty,
    status: 'Pending'
  });

  if(this.f.credentials.value!= undefined){

  this.f.credentials.value.forEach((data, index)=>{

    if(this.f.itemId.value == this.f.credentials.value[index].itemId){
      this.PushVaribaleCheck = this.f.credentials.value[index].itemName;
      const addValue = qty +this.f.credentials.value[index].qty;


     this.purchaseOrderGroup.controls['credentials'].patchValue([{qty:addValue}])

    }
  })
  if(tableValue.controls['itemName'].value !=  this.PushVaribaleCheck){
   this.phoneForms.push(tableValue);
 }

Answer 1

I got a point to sort out the problem here what I have done, below is my code

  this.f.credentials.value.forEach((data, index)=>{

    if(this.f.itemId.value == this.f.credentials.value[index].itemId){
      this.PushVaribaleCheck = this.f.credentials.value[index].itemName;
      const addValue = qty +this.f.credentials.value[index].qty;

      const myForm = (<FormArray>this.purchaseOrderGroup.get("credentials")).at(index);
      myForm.patchValue({
        qty:addValue
      })

    }
  })