title: Dynamic angular2 form with ngModel of ngFor elements
body: <p>I'm trying to create a dynamic form connected to a ngModel which allows user to add more controls as needed. Just as the picture bellow:</p>
  <p><a href="https://i.stack.imgur.com/nSgFf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nSgFf.png" alt="image" /></a></p>
  <p>The form behaves as expected except when adding a new set of controls as it erases the previous input's content. Even though the model is not changed. I created this <a href="http://plnkr.co/edit/oKQIMH?p=preview" rel="nofollow noreferrer">plunkr</a> in order to demonstrate the behavior I am talking about.</p>
  <p>This is the html template I wrote:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;tr *ngFor="let work of works; let i = index"&gt;
    &lt;td&gt;
      &lt;select required id="cliente" class="form-control" [(ngModel)]="work.operation" name="operation"&gt;
        &lt;option&gt;Operation 1&lt;/option&gt;
        &lt;option &gt;Operation 2&lt;/option&gt;
      &lt;/select&gt;
    &lt;/td&gt;
  
    &lt;td&gt;
      &lt;input required type="number" class="form-control" [(ngModel)]="work.cost"
             name="cost"&gt;
    &lt;/td&gt;
  
    &lt;td&gt;
      &lt;input required id="horas_maquina_previstas" type="number" class="form-control" [(ngModel)]="work.hours"
             name="hours"&gt;
    &lt;/td&gt;
  
    &lt;td&gt;
      &lt;button type="button" class="btn btn-danger btn-circle" (click)="removeWork(i)"&gt;Remove&lt;/button&gt;
    &lt;/td&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>and the typescript component definition:</p>
  <pre><code>import {Component, ChangeDetectionStrategy} from '@angular/core'
  
  @Component({
    selector: 'my-app',
    templateUrl: 'src/app.html'
  })
  export class App {
      works = [];
  
      addWork(){
          this.works.push({});
      }
  
      removeWork(index){
          this.works.splice(index, 1);
      }
  
      get diagnostic() {
          return JSON.stringify(this.works);
      }
  }
  </code></pre>
  <p>I can't understand this behavior, and all the related questions I found were about older versions of angular and none had a similar problem.</p>