title: Angular Mat Select CompareWith ID number, and Emit Whole Object
body: <p>I have a Mat Select dropdown with the following values from an Object List.</p>
  
  <pre><code>export class Product {
      productId: number;
      productCode: string;
      productDescription: string;
  }
  </code></pre>
  
  <p>The Mat select List is meant to emit the Whole object as follows:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;mat-select formControlName="productData" [compareWith]="compareProductObjects"
      &lt;mat-option&gt;Select&lt;/mat-option&gt;
      &lt;mat-option *ngFor="let productItem of ProductList" [value]="productItem"&gt;
           {{productItem.productDescription}}
      &lt;/mat-option&gt;
      &lt;mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Also have compareWith function; sometimes code and description may slightly vary depending on different erp systems in company, however ID is always the same, so we compare upon that.</p>
  
  <pre><code>compareProductObjects(object1:any, object2:any) {
     if (typeof object2 === 'object') {
         return object1 &amp;&amp; object2 &amp;&amp; object1.productId === object2.productId;
  }
  </code></pre>
  
  <p>The ProductList has all the real list data.
  When I patch the form, where I have product Class (with 2 being Furniture), however making Code and Description null to test. </p>
  
  <p>as</p>
  
  <pre><code>productTest.productId = 2;
  productTest.productCode = null;
  productTest.productDescription = null;
  
   this.customer.form.patchValue({ productData: productTest});
  </code></pre>
  
  <p>Running this will patch the form, and Successfully change the dropdown item!
  However, the value in output mat select from console form only shows as </p>
  
  <pre><code>{productData: {productId = 2}} 
  </code></pre>
  
  <p>It does Not show any of Code and Description; however it successfully changed the mat select item, Without Code and Description.</p>
  
  <p>How do I make it so, when patching the form with only an ID, it will change and Emit the real object in the list?</p>
  
  <p><strong>Note:</strong></p>
  
  <p>Have 30 other items in this form. Everything else patches perfectly, textboxes, checkboxes, trying to prevent writing special exception cases for dropdown, and want to write one fluent method for other users, if possible</p>
  
  <pre><code>this.customer.form.get('productData').setValue(this.ProductList.find(x=&gt;x.id==2)
  </code></pre>