I have been attempting to dynamically append fields to the choices array upon clicking addNewChoice, but I have not been successful thus far.
<form class="form-inline">
<fieldset *ngFor="let choice of choices">
<div class="form-group">
<select class="form-control" id="timeZonePicker">
<option value="-12" >(GMT -12:00) Eniwetok, Kwajalein</option>
<option value="-11" >(GMT -11:00) Midway Island, Samoa</option>
............
</select>
</div>
<div class="form-group">
<input type="time" class="form-control" id="startTimeInput">
</div>
<div class="form-group">
<input class="time" class="form-control" id="endTimeInput">
</div>
</fieldset>
</form>
<button class="pull-left btn btn-success" (click)="addNewItem()">Add Field</button>
<button class="pull-left btn btn-danger" (click)="removeItem()">Remove Field</button>
Below is the component code snippet.
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);
}}
I have experimented with various Angular.js solutions without success in Angular2. Any assistance would be greatly appreciated!