title: how to watch for valueChanges on a control within a formGroup under a dynamic formArray
body: <p>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.</p>
  
  <pre><code>&lt;form [formGroup]="this.purchaseInvoiceItemVariantsForm" novalidate&gt;
      &lt;div formArrayName="variants"&gt;
          &lt;div *ngFor="let variant of this.purchaseInvoiceItemVariantsForm.controls.variants.controls; let i = index"&gt;
              &lt;div [formGroupName]="i"&gt;
                  &lt;md-input-container&gt;
                      &lt;input mdInput placeholder="Product Code"  formControlName="productBarcode" class="input--small" [readonly]="this.mode == 'view'"&gt;
                  &lt;/md-input-container&gt;
                  &lt;md-input-container&gt;
                      &lt;input mdInput placeholder="Color" formControlName="variant1" class="input--small" [readonly]="this.mode == 'view'" required&gt;
                  &lt;/md-input-container&gt;
                  &lt;md-input-container&gt;
                      &lt;input mdInput placeholder="Size" formControlName="variant2" class="input--small" [readonly]="this.mode == 'view'" required&gt;
                  &lt;/md-input-container&gt;
                  &lt;md-input-container&gt;
                      &lt;input mdInput placeholder="MRP" formControlName="mrp" class="input--small" [readonly]="this.mode == 'view'"&gt;
                  &lt;/md-input-container&gt;
                  &lt;md-input-container&gt;
                      &lt;input mdInput placeholder="Purchase Price" formControlName="purchasePrice" class="input--small" [readonly]="this.mode == 'view'"
                          required&gt;
                  &lt;/md-input-container&gt;
                  &lt;md-input-container&gt;
                      &lt;input mdInput placeholder="Sell Price" formControlName="sellPrice" class="input--small" [readonly]="this.mode == 'view'"
                          required&gt;
                  &lt;/md-input-container&gt;
                  &lt;md-input-container&gt;
                      &lt;input mdInput placeholder="Quantity" formControlName="variantQuantity" class="input--small" [readonly]="this.mode == 'view'" required&gt;
                  &lt;/md-input-container&gt;
                  &lt;md-input-container&gt;
                      &lt;input mdInput placeholder="Discount" formControlName="variantDiscount" class="input--small" [readonly]="this.mode == 'view'"&gt;
                  &lt;/md-input-container&gt;
                  &lt;button md-icon-button (click)="removeVariant(i)" color="warn" *ngIf="purchaseInvoiceItemVariantsForm.controls.variants.length &gt; 1 &amp;&amp; this.mode != 'view'"&gt;&lt;md-icon&gt;delete&lt;/md-icon&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Now once the user have added say 3 variants, i want to be able to listen to the valueChanges of the formControl "productBarcode" so that i can fetch the color and size details from the database.</p>
  
  <p>Any suggestions how this can be achieved ?</p>
  
  <p>thanks in advance!</p>
  
  <p>Regards,
  Navin</p>