title: Custom value for formControlName
body: <p>I need to fill a form control with an item chosen among many. Because of the high number of options, I preferred a modal to a simple <code>&lt;select&gt;</code>.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="form"&gt;
      &lt;label&gt;Item&lt;/label&gt;
      &lt;input formControlName="item" [readOnly]="true" (click)="showModal()"&gt;&lt;/input&gt;    
  &lt;/form&gt;
  </code></pre>
  
  <p>The modal is able to display the available items, let the user select one of them, and update the <code>form.item</code> property accordingly.
  However, because the selected item is a complex object (and not a simple string), my form display an ugly <code>[Object object]</code>. How can I tell the form to show a specific property of item?</p>
  
  <hr>
  
  <p>This is the object I'm trying to display:</p>
  
  <pre><code>export class Item {
      id: number;
      owner: string;
      description: string;
  }
  </code></pre>
  
  <p>I'd like to show the property <code>description</code> of the object.</p>