title: Angular2 dynamically adding/removing form fields
body: <p>I'm trying to dynamically add fields to the choices array when addNewChoice is clicked but still unsuccessful. </p>
  
  <pre><code>&lt;form class="form-inline"&gt;
      &lt;fieldset *ngFor="let choice of choices"&gt;
          &lt;div class="form-group"&gt;           
              &lt;select class="form-control" id="timeZonePicker"&gt;
                  &lt;option value="-12" &gt;(GMT -12:00) Eniwetok, Kwajalein&lt;/option&gt;
                  &lt;option value="-11" &gt;(GMT -11:00) Midway Island, Samoa&lt;/option&gt;
                      ............
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;input type="time" class="form-control" id="startTimeInput"&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;input class="time" class="form-control" id="endTimeInput"&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
      &lt;button class="pull-left btn btn-success" (click)="addNewItem()"&gt;Add Field&lt;/button&gt;
      &lt;button class="pull-left btn btn-danger" (click)="removeItem()"&gt;Remove Field&lt;/button&gt;
  </code></pre>
  
  <p>Here is the component. </p>
  
  <pre><code>export class TimeZonesComponent {
  constructor(){}
  
  choices = [{id: 1}, {id: 2}];
  
  addNewChoice(){
      var newItemNo = this.choices.length + 1;
      this.choices.push({'id': newItemNo});
  }
  
  removeChoice(){
      var lastItem = this.choices.length - 1;
      this.choices.splice(lastItem);
  }}
  </code></pre>
  
  <p>I've tried a bunch of different Angular.js solutions on here but no luck with Angular2. Any help is much appreciated!</p>