在反應形式中使用 md-autocomplete

這個例子需要 FormsModule 和 ReactiveFormsModule。請在你的應用程式/模組中匯入它們。

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

輸入外形 example.html

<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>

輸入外形 example.ts：

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.css：

.example-form {
  width: 500px;
}

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

例項