typescript Angular 2 Material - 在表单中使用 MD 的自动完成示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44597807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 Material - Using MD's autocomplete example in a form
提问by av0000
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 (copied from Material Design's docs) 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:
有没有办法在表单中自动完成工作？我有一个输入地址的表单。我正在使用自动完成（从 Material Design 的文档中复制）用于状态（这是在美国）并且正在工作，只是所选状态未设置为 user.state。因此，当我在提交时控制台注销 myForm.form.value 时，它看起来像这样：
user.name : "Test"
user.phone: ...
etc.
with user.state not even showing up.
user.state 甚至没有出现。
My (relevant) code:
我的（相关）代码：
<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:
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;
}
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.
即使当我尝试使用 (onSelectionChange) 调用函数 selectState(state) 来设置 user.state 时，当我在提交表单时使用 console.log 时，它仍然没有显示。
selectState(value){
this.user.state = value;
}
回答by AJT82
Take a look at this GitHub example: Demo with md-autocomplete (forms)
看看这个 GitHub 示例：Demo with md-autocomplete (forms)
There is an example with both reactive and template-driven form. With the template driven form you remove the formControlcompletely, and just use [(ngModel)]and (ngModelChange)instead. Here's sample for you with the template-driven solution:
有一个具有反应式和模板驱动形式的示例。使用模板驱动的表单，您可以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>
and in component we assign the filtered value to a different variable (tdStates) and keep all states in the statesarray:
在组件中，我们将过滤后的值分配给不同的变量 ( tdStates) 并将所有状态保留在states数组中：
filterStates(val: string) {
if (val) {
const filterValue = val.toLowerCase();
return this.states.filter(state => state.toLowerCase().startsWith(filterValue));
}
return this.states;
}
回答by Nehal
I have taken the example formfrom material's website and added md-autocompleteto it. In the demo, you can filter and select a state from the autocomplete. When the form is submitted, you can see the value getting passed to alert.
我form从材料的网站上拿了这个例子并添加md-autocomplete到其中。在演示中，您可以从自动完成中过滤和选择一个状态。提交表单后，您可以看到传递给 的值alert。
HTML:
HTML：
Full code in plunker demo
plunker演示中的完整代码
<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;
}
回答by Mehmet Fethi
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;
}
回答by Mehmet Fethi
<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>
