[英]Allow user to type in only the options in mat-autocomplete in angular 6
我正在使用mat-autocomplete。
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
想知道是否有一種方法可以限制用戶僅鍵入下拉列表中提供的選項。 僅一,二和三。當用戶鍵入其他內容(如十六)時,則不應顯示該內容
export class AutocompleteSimpleExample {
myControl: FormControl = new FormControl();
options = [
'One',
'Two',
'Three'
];
}
您可以綁定到模糊事件,並檢查輸入值是否等於所需的輸入,如下所示。 我在自己的自動補全版上使用了類似的方法。
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" (blur)="InputControl($event)" [matAutocomplete]="auto">
在組件中
InputControl(event) {
setTimeout(() => {
let isValueTrue = this.options.filter(myAlias =>
myAlias === event.target.value);
if (isValueTrue.length === 0) {
this.form.get(‘MyControl’).setValue(null);
}
}, 300);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.