title: Incorrect binding type of the reactive control
body: <p>I have a strange problem with one of my reactive control <code>function</code> (below). It seems to be bound to a type <code>UserFunction</code> instead of just string as initialized in <code>*ngFor</code> section of my template.
  If I execute <code>this.form.get('function').value</code> it returns UserFunction object - I would expect the string?</p>
  <p>UserFunction definition:</p>
  <pre><code>export class UserFunction {
      id: string;
      userFunction: string;
  }
  </code></pre>
  <p>Component:</p>
  <pre><code>userFunctions: UserFunction[] = [];
  this.form = this.formBuilder.group({
                  scheduledDate: ['', Validators.required],
                  function: ['', [Validators.required, this.functionValidator]],
                  required: [''],
                  userAvailability: [''],
                });
                
          
  </code></pre>
  <p>HTML template:</p>
  <pre><code>    &lt;select formControlName=&quot;function&quot; class=&quot;form-control&quot; [ngClass]=&quot;{ 'is-invalid': submitted &amp;&amp; f.function.errors }&quot;&gt;
  
                 
                  &lt;option *ngFor=&quot;let item of userFunctions&quot; [value]='item'&gt;
                      {{ item.userFunction }}
                  &lt;/option&gt;
              &lt;/select&gt;
          
  </code></pre>
  <p>Sorry I can't explain that simpler then that.</p>