title: Get selected values from NgForm
body: <p>I have a component called dashboard.component.html that consists only of four select boxes that are within a form. I have a button that triggers a function called onSubmit() in dashboard.component.ts. I need the selected values from the form to be passed in to onSubmit() which then passes these values to a service. I can't seem to get the selected values--when I print them out to the console, I get [object Object].</p>
  
  <p>dashboard.component.html:</p>
  
  <pre><code>    &lt;form (ngSubmit)="onSubmit(escortForm)" #escortForm="ngForm"&gt;
  &lt;div class="form-group"&gt;
    &lt;select class="form-control" id="driver" name="driver" #name="ngModel" [(ngModel)]="selectedValue"&gt;
      &lt;option *ngFor="let driver of drivers" [value]="driver"&gt;{{driver.viewValue}}&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;select class="form-control" id="pickup" name="pickup" #name="ngModel" [(ngModel)]="escortService.selectedEscort.pickup"&gt;
      &lt;option *ngFor="let location of locations" [value]="location"&gt;{{location.viewValue}}&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;select class="form-control" id="dropoff" name="dropoff" #name="ngModel" [(ngModel)]="escortService.selectedEscort.dropoff"&gt;
      &lt;option *ngFor="let location of locations" [value]="location"&gt;{{location.viewValue}}&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;select class="form-control" id="numPsngers" name="passenger" #name="ngModel" [(ngModel)]="escortService.selectedEscort.passengers"&gt;
      &lt;option *ngFor="let passenger of passengers" [value]="passenger"&gt;{{passenger.viewValue}}&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;button type="submit" class="btn btn-success"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>dashboard.component.ts (only the relevant parts):</p>
  
  <pre><code>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);
      }
  </code></pre>
  
  <p>escort.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
  import { Escort } from './escort.model';
  
  @Injectable()
  export class EscortService {
  
    escortList : AngularFireList&lt;any&gt;;
    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 : "",
          });
      }
  }
  </code></pre>