title: When switching values from 2 inputs, form is not binded as expected
body: <p>I have a form (template-driven) with two fields and a button that switch the value of the fields.</p>
  
  <p>Field's name are <code>data[0]</code> and <code>data[1]</code> with values <code>france</code> and <code>usa</code>.</p>
  
  <p>When i click the switch button, the template render usa in <code>data[0]</code> and france in <code>data[1]</code> as expected. And when I submit the form I have <code>data[0]=france</code> and <code>data[1]=usa</code>.</p>
  
  <p><strong>Expected behavior:</strong></p>
  
  <p>I expect that the form has the same values as the template render so <code>data[0]=usa</code> and <code>data[1]=france</code>.</p>
  
  <p>Here is a <a href="http://plnkr.co/PUqr4UF8V50594kyDL7I" rel="nofollow noreferrer">plnkr to reproduce this</a>: </p>
  
  <pre><code>//our root app component
  import {Component, NgModule, OnInit, VERSION} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  import { FormsModule, ReactiveFormsModule } from '@angular/forms'
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;my-form&gt;&lt;/my-form&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
    name:string;
    constructor() {
      this.name = `Angular! v${VERSION.full}`
    }
  }
  
  @Component({
    selector: 'my-form',
    template: `
      &lt;h2&gt;Switch input value and check or submit&lt;/h2&gt;
      &lt;form #myForm="ngForm" (ngSubmit)="onsubmit($event, myForm)"&gt;
        &lt;div *ngFor="let country of countries; let i = index"&gt;
        &lt;input [ngModel]="country" name="data[{{i}}]" /&gt;
        &lt;/div&gt;
        &lt;button (click)="switch(myForm)"&gt;switch&lt;/button&gt; &lt;button (click)="switchAndPatch(myForm)"&gt;switch &amp; patch&lt;/button&gt; &lt;br /&gt;
        &lt;button (click)="checkOrder($event, myForm)" type="button"&gt;checkOrder&lt;/button&gt;
        &lt;button type="submit"&gt;submit&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;h2&gt;List of countries that should be in same order than input&lt;/h2&gt;
      &lt;ol&gt;
        &lt;li *ngFor="let formCountry of formCountries; let i = index"&gt;field {{formCountry.fieldName}}: &lt;strong&gt;{{formCountry.label}}&lt;/strong&gt;&lt;/li&gt;
      &lt;/ol&gt;
    `,
  })
  export class FormComponent implements OnInit{
    countries = ['france', 'usa'];
    formCountries = []
    constructor() {
      this.name = `Angular! v${VERSION.full}`
    }
  
    ngOnInit() {
      this.formCountries = []
      this.countries.forEach((country: string, i: number) =&gt; {
        this.formCountries[i] = {label: country, fieldName: `data[${i}]`}
      }
    }
  
    switch(form: NgForm){
      this.countries.reverse()
    }  
  
    switchAndPatch(form: NgForm){
      this.switch(form)
  
      this.countries.forEach((country: string, i: number) =&gt; {
        let newFormValues = {}
        newFormValues[`data[${i}]`] = country
        form.form.patchValue(newFormValues)
      })
    }
  
    checkOrder(ev, form: NgForm) {
      this.formCountries = []
      Object.keys(form.value).forEach((key: string, i: number) =&gt; {
        this.formCountries[i] = {label: form.value[key], fieldName: key}
      })
  
      console.log('checkOrder', this.countries, this.formCountries)
    }
  
    onsubmit(ev, form) {
      this.formCountries = []
      Object.keys(form.value).forEach((key: string, i: number) =&gt; {
        this.formCountries[i] = {label: form.value[key], fieldName: key}
      })
  
      console.log('onsubmit', this.countries, this.formCountries)
    }
  }
  
  @NgModule({
    imports: [ FormsModule, ReactiveFormsModule, BrowserModule ],
    declarations: [ App, FormComponent ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>