Angular 2 Material - 在表单中使用 MD 的自动完成示例

Question

有没有办法让自动完成功能在表单中起作用？我有一个接受地址输入的表格。我正在为州（这是在美国）使用自动完成 (copied from Material Design's docs) 并且它正在工作，除了选定的州没有被设置为 user.state。因此，当我在控制台注销 myForm.form.value 提交时，它看起来像这样：

user.name : "Test"
user.phone: ...
etc.

user.state 甚至没有出现。

我的（相关）代码：

<md-input-container>
  <input 
    mdInput 
    placeholder="State" 
    [mdAutocomplete]="auto"
    [formControl]="stateCtrl"
    name="user.state" 
    [(ngModel)]="user.state"
  >
</md-input-container>

<md-autocomplete 
    #auto="mdAutocomplete"
>
  <md-option 
    *ngFor="let state of filteredStates | async" [value]="state"
    (onSelectionChange)="selectState(state)"
  >
    {{ state }}
  </md-option>
</md-autocomplete>

TS:

  constructor(public dialog: MdDialog,) { 
    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;
  }

即使我尝试使用 (onSelectionChange) 调用函数 selectState(state) 来设置 user.state 当我 console.log 提交表单时它仍然没有显示。

  selectState(value){
    this.user.state = value;
  }

Answer 1

我从 material 的网站上获取了示例 form 并添加了 md-autocomplete。在演示中，您可以从自动完成中筛选和 select 一个状态。提交表单后，您可以看到传递给 alert.

的值

HTML:

plunker 中的完整代码 demo

<form>

// add all form code

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

app.ts:

selectState(state, form){
    form.state = state;
  }

Answer 2

看看这个 GitHub 例子：Demo with md-autocomplete (forms)

有一个同时具有反应式和模板驱动形式的示例。使用模板驱动形式，您可以完全删除 formControl，而只需使用 [(ngModel)] 和 (ngModelChange)。以下是模板驱动解决方案的示例：

<form #f="ngForm">
  <md-input-container>
    <input mdInput placeholder="State" [mdAutocomplete]="tdAuto" name="state" 
       #state="ngModel" [(ngModel)]="currentState"
      (ngModelChange)="tdStates = filterStates(currentState)">
  </md-input-container>

  <md-autocomplete #tdAuto="mdAutocomplete">
    <md-option *ngFor="let state of tdStates" [value]="state">
      <span>{{ state }}</span>
    </md-option>
  </md-autocomplete>    
</form>

并且在组件中，我们将过滤后的值分配给不同的变量 (tdStates) 并将所有状态保留在 states 数组中：

filterStates(val: string) {
  if (val) {
    const filterValue = val.toLowerCase();
    return this.states.filter(state => state.toLowerCase().startsWith(filterValue));
  }
  return this.states;
}

DEMO

Answer 3

  <md-input-container>
    <input mdInput placeholder="State" [mdAutocomplete]="tdAuto" name="state" 
       #state="ngModel" [(ngModel)]="currentState"
      (ngModelChange)="tdStates = filterStates(currentState)">
  </md-input-container>

  <md-autocomplete #tdAuto="mdAutocomplete">
    <md-option *ngFor="let state of tdStates" [value]="state.name">
      <span>{{ state.name }}</span>
    </md-option>
  </md-autocomplete>

Answer 4

  states = [];
  tdStates = [];
  currentState = '';

  ngOnInit() {
    this.states= [
      {code: 'AL', name: 'Alabama'},
      {code: 'AK', name: 'Alaska'},
      {code: 'AZ', name: 'Arizona'},
      {code: 'AR', name: 'Arkansas'},
      {code: 'CA', name: 'California'},
      {code: 'CO', name: 'Colorado'},
      {code: 'CT', name: 'Connecticut'},
      {code: 'DE', name: 'Delaware'},
      {code: 'FL', name: 'Florida'},
      {code: 'GA', name: 'Georgia'},
      {code: 'HI', name: 'Hawaii'},
      {code: 'ID', name: 'Idaho'},
      {code: 'IL', name: 'Illinois'},
      {code: 'IN', name: 'Indiana'},
      {code: 'IA', name: 'Iowa'},
      {code: 'KS', name: 'Kansas'},
      {code: 'KY', name: 'Kentucky'},
      {code: 'LA', name: 'Louisiana'},
      {code: 'ME', name: 'Maine'},
      {code: 'MD', name: 'Maryland'},
      {code: 'MA', name: 'Massachusetts'},
      {code: 'MI', name: 'Michigan'},
      {code: 'MN', name: 'Minnesota'},
      {code: 'MS', name: 'Mississippi'},
      {code: 'MO', name: 'Missouri'},
      {code: 'MT', name: 'Montana'},
      {code: 'NE', name: 'Nebraska'},
      {code: 'NV', name: 'Nevada'},
      {code: 'NH', name: 'New Hampshire'},
      {code: 'NJ', name: 'New Jersey'},
      {code: 'NM', name: 'New Mexico'},
      {code: 'NY', name: 'New York'},
      {code: 'NC', name: 'North Carolina'},
      {code: 'ND', name: 'North Dakota'},
      {code: 'OH', name: 'Ohio'},
      {code: 'OK', name: 'Oklahoma'},
      {code: 'OR', name: 'Oregon'},
      {code: 'PA', name: 'Pennsylvania'},
      {code: 'RI', name: 'Rhode Island'},
      {code: 'SC', name: 'South Carolina'},
      {code: 'SD', name: 'South Dakota'},
      {code: 'TN', name: 'Tennessee'},
      {code: 'TX', name: 'Texas'},
      {code: 'UT', name: 'Utah'},
      {code: 'VT', name: 'Vermont'},
      {code: 'VA', name: 'Virginia'},
      {code: 'WA', name: 'Washington'},
      {code: 'WV', name: 'West Virginia'},
      {code: 'WI', name: 'Wisconsin'},
      {code: 'WY', name: 'Wyoming'},
    ];
  }

  filterStates(val: string) {
    if (val) {
      const filterValue = val.toLowerCase();
      return this.states.filter(state => state.name.toLowerCase().startsWith(filterValue));
    }
    return this.states;
  }

Angular 2 Material - 在表单中使用 MD 的自动完成示例

Angular 2 Material - Using MD's autocomplete example in a form

autocomplete

typescript

angular-material2

angular