Angular2 log values after dynamically adding form fields

Question

I am trying to console log the values of each object in the choices array. I am currently able to log the objects in the choices array but all of the values are empty. I am seeing timeZonePicker: "", startTimeInput: "", endTimeInput: "" for each object. I am able to add and remove from the choices array and log the key but I cannot log the value. I have tried a lot of different things but still unsuccessful.

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div *ngFor="let choice of choices; trackBy=customTrackBy" class="form-inline">
                <select [ngModel]="choice.timeZonePicker" class="form-control" id="timeZonePicker">
                    <option *ngFor="let timeZone of timeZones" [selected]="timeZone.chosenTimeZone == '(GMT) Western Europe Time, London, Lisbon, Casablanca, Greenwich'">{{ timeZone.chosenTimeZone }}</option>
                </select>
                    <input [ngModel]="choice.startTimeInput" type="time" class="form-control" id="startTimeInput">
                    <input [ngModel]="choice.endTimeInput" type="time" class="form-control" id="endTimeInput">
            </div> <!-- end form field div -->
            <div class="container">
                <button (click)="onSubmit()" class="btn btn-primary">Submit</button>
            </div>
            <div class="container">
                <button class="pull-left btn btn-success" (click)="addNewChoice()">Add Field</button>
                <button class="pull-left btn btn-danger" (click)="removeChoice()">Remove Field</button>
            </div>
        </div> <!-- end col-md-9 -->
    </div> <!-- end row -->
</div> <!-- end container -->

Below is the component.

export class TimeZonesComponent {
constructor(){}

timeZones = [ 
        { val: -12, chosenTimeZone: '(GMT -12:00) Eniwetok, Kwajalein'},
        { val: -11, chosenTimeZone: '(GMT -11:00) Midway Island, Samoa'},....];

choices = [
    {
    timeZonePicker: '',
    startTimeInput: '',
    endTimeInput: ''
    }, 
    {         
    timeZonePicker: '',
    startTimeInput: '',
    endTimeInput: ''
    }];

addNewChoice(){
    var dataObj = {           
        timeZonePicker: '',
        startTimeInput: '',
        endTimeInput: ''
    };
    this.choices.push(dataObj);
}

removeChoice(){
    var lastItem = this.choices.length - 1;
    this.choices.splice(lastItem);
    console.log(this.choices);
}

onSubmit(){  
    console.log(this.choices);  
}

customTrackBy(index: number, obj: any){
    return index;
}
}

I really appreciate any help.

Answer 1

I found out my error. I needed to use trackBy (which I wasn't initially) and [(ngModel]). I was only using one way binding but I needed two way. If anyone would like to see the code for learning, just comment and I will happily share it.