Angular 6 Form Array Patch Values on Value Changes

Question

Below is my FormArray, I would like to update one input based on the value changes on another input. Whenever user changes the product, the service will get the price and taxPercent, which needs to be patched for that index in the form array and when the quantity is added, i would like to patch the totalAmount. This was easy when it's just a formControlElements by subscribing to respective valueChanges and path the respective fields. How can I do the same in FormArray?

<div formArrayName="products" *ngFor="let product of productsArray.controls; let i=index">
      <div [formGroupName]="i">
          <div class="form-row">

              <div class="form-group col-md-4">
                  <label for="product">Product</label>
                  <select formControlName="pdt"  class="form-control" >
                      <option [value]="pdt.productPriceId" *ngFor="let pdt of productPrice">{{pdt.productName}}  -  {{pdt.size}}</option>
                  </select>
              </div>

              <div class="form-group col-md-1">
                <label for="price">Price</label>
                <input type="text" class="form-control" formControlName="price" id="price">
              </div>
              <div class="form-group col-md-1">
                <label for="taxPercent">Tax %</label>
                <input type="text" class="form-control" formControlName="taxPercent" id="taxPercent">
              </div>

              <div class="form-group col-md-1">
                <label for="quantity">Qty</label>
                <input type="text" class="form-control" formControlName="quantity" id="quantity">
              </div>

              <div class="form-group col-md-1">
                <label for="totalAmount">Amt</label>
                <input type="text" class="form-control" formControlName="totalAmount" id="totalAmount">
              </div>

            <div class="form-group col-md-1">
                <span>
                  <button class="btn btn-primary" (click)=addProduct()>Add</button>
                </span>
            </div>
            <div class="form-group col-md-1">
              <span>
                <button class="btn btn-primary" (click)=removeProduct(i)>Remove</button>
              </span>
          </div>
        </div>
      </div>
    </div>

My Value Changes Subscription for a FormControl looks like below. But I'm not sure how to do the same for FormArray

this.billingForm.get('products[0].pdt').valueChanges.subscribe(
      (value) => {

          console.log(value);
          let taxPercentVal: Number = 0;
          let priceVal: Number = 0;
          this.productPrice.forEach(function (val) {
            if(value == val.productPriceId)
            {
              taxPercentVal = val.taxPercent;
              priceVal = val.price;
            }
          });

          this.billingForm.patchValue({
            products: {
              taxPercent: taxPercentVal,
              price: priceVal,
              quantity: '',
              totalAmount: '' 
            }
          })



      }
    );



    this.billingForm.get('products.quantity').valueChanges.subscribe((value) => {
          console.log(value);
          let taxPer = this.billingForm.value.products.taxPercent;
          console.log(taxPer);
          let pr = this.billingForm.value.products.price;
          console.log(pr);
          let qty = value;
          console.log(qty);
          let totAmt = (pr * qty) + ((pr * qty) / taxPer);
          console.log(totAmt);
          this.billingForm.patchValue({
            products: {
              totalAmount: totAmt
            }
          })
    })

Answer 1

you might want to add a function on your change event. Something like below:

<div class="form-group col-md-4">
                  <label for="product">Product</label>
                  <select formControlName="pdt"  class="form-control" **(change)="onChange($event)"** >
                      <option [value]="pdt.productPriceId" *ngFor="let pdt of productPrice">{{pdt.productName}}  -  {{pdt.size}}</option>
                  </select>
</div>

You should be able to capture the new product there and can update your rest of the fields using data binding. Hope it helps!