title: How to get index of changed item in angular form array
body: <p>I'm using Angular 4 with reactive forms. I have a form array that I am trying to tie to an array I keep track of in my component. I'm using reactive forms so I can have the validation, so I don't want to use the template forms approach.</p>
  
  <p>I add items to the form array like so:</p>
  
  <pre><code>createFormWithModel() {
    this.orderForm = this.fb.group({
      orderNumber: [this.order.ProductBookingOrder],
      orderDate: [this.order.PurchaseOrderIssuedDate],
      lineDetailsArray: this.fb.array([])
    })
  
    const arrayControl = &lt;FormArray&gt;this.orderForm.controls['lineDetailsArray'];
    this.order.ProductBookingDetails.forEach(item =&gt; {
      let newGroup = this.fb.group({
        ProductName: [item.ProductName],
        Quantity: [item.ProductQuantity.Quantity],
        UOM: [item.ProductQuantity.UOM],
        RequestedShipDate: [item.RequestedShipDate]
      })
    })
  }
  </code></pre>
  
  <p>The orderForm is obviously my reactive forms FormGroup. the order is my object I get from my API and I want to update its values, including the line details. I think I should use 'valueChanges.subscribe' on each newGroup but I'm not sure how to get the index of the item that was changed. Any thoughts?</p>
  
  <pre><code>     newGroup.valueChanges.subscribe('i want value and index some how' =&gt; {
  this.order.ProductbookingDetails[index].ProductName = value.ProductName;
      });
  </code></pre>
  
  <p>Here's the HTML for this portion:</p>
  
  <pre><code>&lt;tbody formArrayName="lineDetailsArray"&gt;
          &lt;tr [formGroupName]="i" *ngFor="let line of orderForm.controls['lineDetailsArray'].controls; index as i"&gt;
            &lt;td&gt;&lt;input class="form-control" type="text" placeholder="Product Name" formControlName="ProductName" required/&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input class="form-control" type="number" step=".01" (focus)="$event.target.select()" placeholder="Quantity" formControlName="Quantity"/&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input class="form-control" readonly formControlName="UOM"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;date-picker formControlName="RequestedShipDate" format="L" [showClearButton]="false"&gt;&lt;/date-picker&gt;&lt;/td&gt;
            &lt;td&gt;&lt;button type="button" (click)="deleteLineDetail(i)"&gt;Remove&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
  </code></pre>