Angular 2材質 - 在表單中使用MD的自動完成示例

有沒有辦法讓表單內的自動完成工作？我有一個輸入地址的表單。我爲狀態（這是在美國）使用自動完成（copied from Material Design's docs），除了選定的狀態未設置爲user.state之外，它正在工作。所以，當我登出myForm.form.value時提交它看起來像這樣：Angular 2材質 - 在表單中使用MD的自動完成示例

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（州）設置user.state它仍然當我在console.log上提交表單時不顯示。

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

來源

2017-06-16 gv0000

糊塗這裏的種類 - 首先，爲什麼喲你對輸入的值做ngModel和formControl？如果你刪除了ngModel並在formControl上做了一個valueChanges，它是否顯示值？你有formGroup作爲窗體控件的父項嗎？自動完成應該與沒有改變的值無關，所以有些東西被錯誤地實現。 – JSess

看看這個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

來源

2017-06-24 10:14:01 Alex

我從材料的網站採取的例子form並添加md-autocomplete它。在演示中，您可以過濾並從自動完成中選擇一個狀態。表單提交後，您可以看到傳遞給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; 
    }

來源

2017-06-20 14:49:13 Nehal

Angular 2材質 - 在表單中使用MD的自動完成示例

回答

相關問題