title: Angular 2 Material - Using MD's autocomplete example in a form
body: <p>Is there a way to have the autocomplete work inside a form? I have a form that takes input for an address. I'm using autocomplete (<a href="https://material.angular.io/components/component/autocomplete" rel="noreferrer">copied from Material Design's docs</a>) for states (this is in the US) and that is working except that the selected state is not being set to user.state. So when I console log out the myForm.form.value on submit it looks like this:</p>
  
  <pre><code>user.name : "Test"
  user.phone: ...
  etc.
  </code></pre>
  
  <p>with user.state not even showing up.</p>
  
  <p>My (relevant) code:</p>
  
  <pre><code>&lt;md-input-container&gt;
    &lt;input 
      mdInput 
      placeholder="State" 
      [mdAutocomplete]="auto"
      [formControl]="stateCtrl"
      name="user.state" 
      [(ngModel)]="user.state"
    &gt;
  &lt;/md-input-container&gt;
  
  &lt;md-autocomplete 
      #auto="mdAutocomplete"
  &gt;
    &lt;md-option 
      *ngFor="let state of filteredStates | async" [value]="state"
      (onSelectionChange)="selectState(state)"
    &gt;
      {{ state }}
    &lt;/md-option&gt;
  &lt;/md-autocomplete&gt; 
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>  constructor(public dialog: MdDialog,) { 
      this.stateCtrl = new FormControl();
      this.filteredStates = this.stateCtrl.valueChanges
          .startWith(null)
          .map(name =&gt; this.filterStates(name));
    }
  
    filterStates(val: string) {
      return val ? this.states.filter(s =&gt; new RegExp(`^${val}`, 'gi').test(s))
                 : this.states;
    }
  </code></pre>
  
  <p>Even when I try to use (onSelectionChange) to call function selectState(state) to set the user.state it still doesn't show up when I console.log the form on submit.</p>
  
  <pre><code>  selectState(value){
      this.user.state = value;
    }
  </code></pre>