how to watch for valueChanges on a control within a formGroup under a dynamic formArray

Question

i am new to Angular 2/4 and also to web development in general. I have this form that collects the information of variants of products in a purchase form. I have built a formArray of formGroups of variants as shown in below HTML. ```

Accepted Answer

We could do a version of the `valueChanges`, which starts listening when the `variants`-array length is a `>= 3`. Then we listen to each change in the barcode.

I assume you have a function where you add new controls to your `variants` array, we could implement it there:

```
addVariant() {
  // code here for adding control

// check length   
  if(this.purchaseInvoiceItemVariantsForm.get('variants').length >= 3) {
    // iterate each object in array
    for(let val of this.purchaseInvoiceItemVariantsForm.get('variants').controls) {
      // listen to changes in each barcode, if change, do something!
      val.get('productBarcode').valueChanges.subscribe(data => {
      console.log(val.get('productBarcode').value)
      // do something!
      })
    }
  } 
}
```

Demo

how to watch for valueChanges on a control within a formGroup under a dynamic formArray

Solution

Problem