title: How to get selected object from valueChanges but only bind object id to form using Angular reactive forms?
body: <p>I have a select field that allows me to choose a car and the car id gets bound to the form.</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-label&gt;Car&lt;/mat-label&gt;
    &lt;mat-select formControlName="carId"&gt;
      &lt;mat-option *ngFor="let car of cars | async" [value]="car.carId"&gt;
        {{car.carName}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I'd like to get the instance of the car so that I can grab other info off of the object, but I can't do that using valueChanges as it only gives me the id:</p>
  
  <pre><code>this.form.get('carId').valueChanges.subscribe(carId =&gt; { ... );
  </code></pre>
  
  <p>I could change the select field to bind the object instead of the id like this:</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-label&gt;Car&lt;/mat-label&gt;
    &lt;mat-select formControlName="carId"&gt;
      &lt;mat-option *ngFor="let car of cars | async" [value]="car"&gt;
        {{car.carName}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>But then the whole object is being bound to the form instead of just the id which would mess up my form submission.</p>
  
  <p>Is there an elegant way to get the selected object but still bind just the id to the form?</p>