title: Select Form Control returns [object Object] in Angular 7
body: <p>In my Angular 7 project, I have a reactive form with <code>select</code> and <code>*ngFor</code> blocks. ngFor values are filtered based selected value from the options and custom pipe takes care of filtering. Whenever I select a value from options, all I see is <code>&quot;[object Object]&quot;</code> output. I tried <code>(ngModelChange)=fun()</code>, <code>change</code> events. They did not work.</p>
  <p><strong>Form</strong>:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div class=&quot;container container-fluid&quot;&gt;
        &lt;h3 style=&quot;text-align: center&quot;&gt; BCMC CyberSecurity Jobs&lt;/h3&gt;
        &lt;form [formGroup]=&quot;jobsForm&quot;&gt;
        &lt;div class=&quot;row&quot; style=&quot;margin-top: 40px&quot;&gt;
          &lt;div class=&quot;col-xs-6 col-sm-6 col-md-6 col-lg-6&quot;&gt;
              &lt;label&gt; Job Type:
                &lt;select class=&quot;custom-select&quot; formControlName=&quot;jobTypeControl&quot; (ngModelChange)=&quot;updateFilterValue($event)&quot;&gt;
                  &lt;option *ngFor=&quot;let jobType of jobTypeObservable&quot; [value]=&quot;jobType&quot;&gt; {{jobType.name}}&lt;/option&gt;
                &lt;/select&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      
          &lt;div *ngIf=&quot;jobsDataAvailable()&quot; class=&quot;col-xs-6 col-sm-6 col-md-6 col-lg-6&quot;&gt;
            &lt;div class=&quot;has-text-centered&quot;&gt;
              &lt;pagination-controls (pageChange)=&quot;page = $event&quot; class=&quot;my-pagination&quot; directionLinks=&quot;true&quot; maxSize=&quot;5&quot;
                                   nextLabel=&quot;&quot; previousLabel=&quot;&quot;&gt;&lt;/pagination-controls&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      
        &lt;div *ngIf=&quot;jobsDataAvailable()&quot;&gt;
          &lt;div *ngFor=&quot;let job of (jobsObservable) | stringFilter: this.jobsForm.controls['jobTypeControl'].value  | paginate: { itemsPerPage: 10, currentPage: page }&quot; class=&quot;row&quot; style=&quot;margin-top: 10px&quot;&gt;
            &lt;div class=&quot;col-xs-12 col-sm-12 col-md-12 col-lg-12&quot;&gt;
              &lt;div class=&quot;card&quot;&gt;
                &lt;div class=&quot;card-body&quot;&gt;
                  &lt;h5 class=&quot;card-title&quot;&gt;{{job.title}}&lt;/h5&gt;
                  &lt;h6 class=&quot;card-subtitle mb-2 text-muted&quot;&gt;{{job.city}}, {{job.state}}&lt;/h6&gt;
                  &lt;p class=&quot;card-text&quot;&gt;This text will be replaced by clearance value in future&lt;/p&gt;
                  &lt;a class=&quot;btn btn-primary&quot; href=&quot;https://bcmcllc.applytojob.com/apply/{{job.board_code}}&quot;&gt;View and Apply&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt; &lt;!-- End of ngIf--&gt;
        &lt;/form&gt;
      
      &lt;/div&gt;
  </code></pre>
  <p><strong>Custom Filter</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>     import {Pipe, PipeTransform} from &quot;@angular/core&quot;;
          @Pipe({
            name: 'stringFilter'
          })
          export class StringFilterPipe implements PipeTransform
          {
            transform(value: string[], filterValue: any)
            {
              if (!filterValue || filterValue === '')
              {
                return value;
              }
              return value.filter(item =&gt; -1 &lt; item.toLowerCase().indexOf(filterValue.toLowerCase()));
            }
          }
  </code></pre>
  <pre><code>**JobsListComponent**
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>    import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
      import {JobsService} from './services/jobs.service';
      import {SERVER_API_URL} from '../../app.constants';
      import {Observable} from 'rxjs';
      import {Job} from './model/job';
      import {FormControl, FormGroup} from '@angular/forms';
      import {JobType} from './model/job-type';
      
      @Component({
        selector: 'app-jobs-list',
        templateUrl: './jobs-list.component.html',
        styleUrls: ['./jobs-list.component.css']
      })
      
      export class JobsListComponent implements OnInit
      {
        jobsObservable: Observable&lt;Job[]&gt;;
        jobTypeObservable: Observable&lt;JobType[]&gt;;
        page: number = 1;
      
        jobsForm = new FormGroup({
          jobTypeControl: new FormControl({value: '', disabled: false})
        });
      
        //this.form.controls['jobTypeControl'].value
        //jobsForm.get('jobTypeControl').value
        constructor(private jobsService: JobsService) {
        }
      
        ngOnInit()
        {
          this.getAllJobTypes();
          this.getAllJobs();
        }
      
        getAllJobs() {
          let url = SERVER_API_URL + 'jobs/all';
      
          this.jobsService.getAllJobs(url).subscribe(
            data =&gt; {
              // @ts-ignore
              this.jobsObservable = data;
            },
            error =&gt; console.error('Failed to retrieve values from backend, error=&gt; ' + error),
            () =&gt; console.log('Jobs retrieved from backend'));
          return this.jobsObservable;
        }
      
        getAllJobTypes() {
          let url = SERVER_API_URL + 'jobtypes/all';
      
          this.jobsService.getAllJobTypes(url).subscribe(
            data =&gt; {
              // @ts-ignore
              this.jobTypeObservable = data;
            },
            error =&gt; console.error('Failed to retrieve values from backend, error=&gt; ' + error),
            () =&gt; console.log('Job Types retrieved from backend'));
          return this.jobTypeObservable;
        }
      
        jobsDataAvailable() {
          return this.jobsObservable !== undefined;
        }
      
      
        updateFilterValue(event)
        {
          console.log(&quot;Emitted Value &quot;+event);
        }
      }
  </code></pre>