title: Reactive forms mat-autocomplete with array of objects
body: <p>I have a Multiselect and getting an array of objects back as a result from the DB I need the <code>[displayWith]=""</code> to show the name of the selected object but to store the ID of the selection. 
   here is the HTML Code</p>
  
  <pre><code>
        &lt;mat-form-field class="example-full-width"&gt;
          &lt;input type="text"
                 placeholder="Customers"
                 i18n-placeholder="customerInput"
                 aria-label="customers"
                 matInput
                 [formControl]="customerControl"
                 formControlName="customerId"
                 (focus)="getCustomers(searchedCustomer)"
                 (change)="customerOnChange($event)"
                 [matAutocomplete]="autoCustomer"&gt;
          &lt;mat-autocomplete #autoCustomer="matAutocomplete" [displayWith]="displayCustomerName"&gt;
  
            &lt;mat-option *ngIf="customerloading"&gt;&lt;span [ngTemplateOutlet]="loading"&gt;&lt;/span&gt;&lt;/mat-option&gt;
  
            &lt;ng-container *ngIf="!customerloading"&gt;
              &lt;mat-option *ngFor="let customer of customerList" [value]="customer"&gt;
                {{ customer.name }}
              &lt;/mat-option&gt;
            &lt;/ng-container&gt;
          &lt;/mat-autocomplete&gt;
        &lt;/mat-form-field&gt;
  
  </code></pre>
  
  <p>in this case, the customer list is an array of objects like </p>
  
  <pre><code>0: {id: 94, name: "Abata", abbreviation: "Npath", active: 0, number: 54, …}
  1: {id: 443, name: "Abata", abbreviation: "Wikido", active: 0, number: 36, …}
  2: {id: 226, name: "Abata", abbreviation: "Tazz", active: 0, number: 90, …}
  </code></pre>
  
  <p>on the input needy so be the <code>name</code> but on the <code>formGroup</code> > <code>value</code> needs to be just the id not the whole object or the name.</p>
  
  <p>with the approach above the value results show the whole object., like so:</p>
  
  <pre><code>value:
  customerId: {id: 226, name: "Abata", abbreviation: "Tazz", active: 0, number: 90, …}
  </code></pre>
  
  <p>WHAT ID NEED:</p>
  
  <pre><code>value:
  customerId: 226
  </code></pre>
  
  <p>What I tried:</p>
  
  <p>I tried to change the 
  <code>&lt;mat-option *ngFor="let customer of customerList" [value]="customer"&gt;</code> to <code>[value]="customer.id'
  but then I don't get the name of from</code>[displayWith]=""`</p>
  
  <p>I also tried to at the customer.id to the FormControll instead of an empty string</p>
  
  <pre><code>  this.contractForm = new FormGroup({
        customerId: new FormControl(customer.id, [Validators.required]),
  ...
  </code></pre>