Angular Material - Utilize md autocomplete inside a reactive form in angular material2 - Angular Material Tutorial

This example requires FormsModule and ReactiveFormsModule. Please import them in your application/module.

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

<form class="example-form" (ngSubmit)="submit(addForm.value)" [formGroup]="addForm">
  <md-input-container class="example-full-width">
    <input mdInput placeholder="Company (disabled)" disabled value="Google" formControlName="company">
  </md-input-container>

  <table class="example-full-width" cellspacing="0"><tr>
    <td><md-input-container class="example-full-width">
      <input mdInput placeholder="First name" formControlName="fname">
    </md-input-container></td>
    <td><md-input-container class="example-full-width">
      <input mdInput placeholder="Long Last Name That Will Be Truncated">
    </md-input-container></td>
  </tr></table>

  <p>
    <md-input-container class="example-full-width">
      <textarea mdInput placeholder="Address" formControlName="address">1600 Amphitheatre Pkwy</textarea>
    </md-input-container>
    <md-input-container class="example-full-width">
      <textarea mdInput placeholder="Address 2"></textarea>
    </md-input-container>
  </p>

  <table class="example-full-width" cellspacing="0"><tr>
    <td><md-input-container class="example-full-width">
      <input mdInput placeholder="City" formControlName="city">
    </md-input-container></td>
    
    <td><md-input-container>
      <input mdInput placeholder="State" 
            [mdAutocomplete]="auto"
            [formControl]="stateCtrl"
            formControlName="state">
    </md-input-container></td>
    
    <td><md-input-container class="example-full-width">
      <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043" formControlName="zip">
      <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
    </md-input-container></td>
  </tr></table>
  
   <button md-raised-button  type="submit">Submit</button>
   
   <md-autocomplete #auto="mdAutocomplete" >
    <md-option *ngFor="let state of filteredStates | async" [value]="state" (onSelectionChange)="selectState(state, addForm.value)">
      {{ state }}
    </md-option>
  </md-autocomplete>
   
</form>

<p>Form values:</p> 
<p>{{ addForm.value | json }}</p>

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, FormControl} from '@angular/forms';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

@Component({
  selector: 'input-form-example',
  templateUrl: 'input-form-example.html',
  styleUrls: ['input-form-example.css'],
})
export class InputFormExample {
  stateCtrl: FormControl;
  filteredStates: any;
  
  addForm: FormGroup;
  
  state;

  states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Carolina',
    'North Dakota',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Pennsylvania',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming',
  ];

  constructor(private fb: FormBuilder) {
    
    this.addForm = this.fb.group({
      fname: '',
      address: '',
      address2: '',
      city: '',
      "state": this.state,
      zip: '',
      company: '',
      lname: ''
    });
    this.stateCtrl = new FormControl();
    this.filteredStates = this.stateCtrl.valueChanges
        .startWith(null)
        .map(name => this.filterStates(name));
  }

  filterStates(val: string) {
    return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
               : this.states;
  }
  
  submit(form){
    alert(JSON.stringify(form));
  }
  
  selectState(state, form){
    // console.log(state);
    // console.log(form);
    form.state = state;
  }
}

.example-form {
  width: 500px;
}

.example-full-width {
  width: 100%;
}

This angular material provides most of the technology areas such as angular material example , angular material download , angular material design template , angular material vs bootstrap , angular material for angular 2 , what is angular material , angular material demo , angular material2 , angular material demo , angular 4 material , angular material npm , angular material tutorial , angular material cdn , angular material vs bootstrap