title: Angular reactive form hidden input not binding?
body: <p>I have a reactive form where I create the controls from my data model. Initially, everything is sorted by a datapoint called the "processingOrder" in numerical order.</p>
  
  <p>Within my form array, I am using <code>*ngFor</code> to iterate over controls and store the index in a hidden <code>form control</code>. If I move a record up or down in my table, the index thats being applied to the hidden field should reflect the change in my model right?</p>
  
  <pre><code>&lt;form [formGroup]="rulesForm" (ngSubmit)="onSubmit(form)"&gt;
  &lt;div formGroupName="ruleData"&gt;
     &lt;div formArrayName="rules"&gt;
        &lt;div *ngFor="let child of rulesForm.controls.ruleData.controls.rules.controls; let i = index"&gt;
           &lt;div formGroupName="{{i}}"&gt;
              &lt;input type="text" placeholder="Rule Name" formControlName="name"/&gt; &amp;nbsp; 
              &lt;input type="text" placeholder="Rule Description" formControlName="description"/&gt; &amp;nbsp;
              &lt;input type="text" placeholder="Processing Order" formControlName="processingOrder"/&gt; &amp;nbsp;
              &lt;button class="button" (click)="move(-1, i)"&gt;Move Up&lt;/button&gt; &amp;nbsp; 
              &lt;button class="button" (click)="move(1, i)"&gt;Move Down&lt;/button&gt;
  
  
              &lt;!-- Why doesn't this update my model when it gets a new index? --&gt;
              &lt;input type="hidden" formControlName="processingOrder" [value]="i"&gt;
  
  
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I would have expected that in my plunker, the processing order numbers should always remain in the 1-5 order and each time a rule is moved up or down, the model is updated to the new index it received.</p>
  
  <p><a href="https://plnkr.co/edit/ZCgHPEaUM00aLxM6Sf9t?p=preview" rel="noreferrer">https://plnkr.co/edit/ZCgHPEaUM00aLxM6Sf9t?p=preview</a></p>