title: submit value for mat-autocomplete
body: <p>We have a <code>mat-autocomplete</code> input on a form.</p>
  
  <p>The options are populated from a database, these are returns as an ID, String pair.</p>
  
  <p>I would like to allow the user to select based on the string value but submit the ID value with the form for a lookup when posted server side? What is the best solution for this please?</p>
  
  <p>My component.html is;</p>
  
  <pre><code>&lt;mat-form-field class="form-group special-input"&gt;
      &lt;input type="text" placeholder="Select a trade" aria-label="Select a trade" matInput formControlName="trade" [matAutocomplete]="auto"&gt;
      &lt;mat-autocomplete #auto="matAutocomplete" md-menu-class="autocomplete"&gt;
          &lt;mat-option *ngFor="let option of filteredOptions | async" [value]="option.name"&gt;
               &lt;span [innerHTML]="option.name | highlight: toHighlight"&gt;&lt;/span&gt;
          &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Where option has a name and id field.</p>
  
  <p>I have tried adjusting the <code>[value]="option.name"</code> to <code>[value]="option.id"</code> however this updated the text field in the auto complete to be the id value rather than the string?</p>