Получить выбранные значения из NgForm

Question

У меня есть компонент с именем dashboard.component.html, который состоит только из четырех полей выбора, которые находятся внутри формы. У меня есть кнопка, которая вызывает функцию onSubmit () в dashboard.component.ts. Мне нужно, чтобы выбранные значения из формы передавались в onSubmit (), которая затем передает эти значения в службу. Кажется, я не могу получить выбранные значения - когда я распечатываю их на консоль, я получаю [объект объекта].

dashboard.component.html:

    <form (ngSubmit)="onSubmit(escortForm)" #escortForm="ngForm">
<div class="form-group">
  <select class="form-control" id="driver" name="driver" #name="ngModel" [(ngModel)]="selectedValue">
    <option *ngFor="let driver of drivers" [value]="driver">{{driver.viewValue}}</option>
  </select>
</div>
<div class="form-group">
  <select class="form-control" id="pickup" name="pickup" #name="ngModel" [(ngModel)]="escortService.selectedEscort.pickup">
    <option *ngFor="let location of locations" [value]="location">{{location.viewValue}}</option>
  </select>
</div>
<div class="form-group">
  <select class="form-control" id="dropoff" name="dropoff" #name="ngModel" [(ngModel)]="escortService.selectedEscort.dropoff">
    <option *ngFor="let location of locations" [value]="location">{{location.viewValue}}</option>
  </select>
</div>
<div class="form-group">
  <select class="form-control" id="numPsngers" name="passenger" #name="ngModel" [(ngModel)]="escortService.selectedEscort.passengers">
    <option *ngFor="let passenger of passengers" [value]="passenger">{{passenger.viewValue}}</option>
  </select>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>

dashboard.component.ts (только соответствующие части):

import { Component, OnInit } from '@angular/core';
import * as Chartist from 'chartist';
import { FormsModule }   from '@angular/forms';
import { NgForm } from '@angular/forms';
import { EscortService } from './shared/escort.service';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
declare var $:any;
declare var google: any;

@Component({
    selector: 'dashboard-cmp',
    moduleId: module.id,
    templateUrl: 'dashboard.component.html',
    providers: [EscortService]
})

export class DashboardComponent implements OnInit{

    constructor(private escortService : EscortService, private firebase : AngularFireDatabase) { }

onSubmit(escortForm: NgForm){
       this.escortService.newEscort(escortForm.value);
    }

escort.service.ts:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Escort } from './escort.model';

@Injectable()
export class EscortService {

  escortList : AngularFireList<any>;
  selectedEscort : Escort = new Escort();

  constructor(private firebase : AngularFireDatabase) { }

  newEscort(escort : Escort){
        this.escortList.push({
            driver : escort.driver.toString(),
            pickup : escort.pickup,
            dropoff : escort.dropoff,
            passengers : escort.passengers,
            no_show : false,
            status : "",
            created : "",
        });
    }
}

Answer 1

Так как значения элемента select выглядят как объекты, они должны быть установлены с [ngValue] вместо [value]:

<div class="form-group">
  <select class="form-control" id="pickup" name="pickup" #name="ngModel" [(ngModel)]="escortService.selectedEscort.pickup">
    <option *ngFor="let location of locations" [ngValue]="location">{{location.viewValue}}</option>
  </select>
</div>