使用 angular mat-autocomplete 節省（聚焦）

Question

我有一個帶有自動完成功能的簡單輸入

<input [matAutocomplete]="auto" (focusout)="save()">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

我想在用戶不再使用輸入字段時保存輸入值

問題是當我點擊輸入字段的自動完成選項焦點功能時被調用。

我有哪些選項可以保存檢查自動完成和輸入字段狀態的輸入值

謝謝

Answer 1

如果您只想處理自動完成選項上的單擊，則應使用(click)該選項來處理它。

<input [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option (click)="save(number)" *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

但是，如果您想重點關注，這將起作用：

<input #myInput (focusout)="save(myInput.value)" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

Stackblitz

Answer 2

是的，我們有辦法做到這一點，

<input [matAutocomplete]="auto" matInput (focusout)="onFocusOut()" [formControl]="autoInput">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let number of numbers" [value]="number">
      {{number}}
  </mat-option>
</mat-autocomplete>

這是代碼，我添加了一個formControl來將 autoComplete 值綁定到一個變量。 而這里的方法是，我們可以在matInput被聚焦后訪問matInput值，然后我們可以執行一些操作，例如 autoSelect a value 或 filter options 等，以操縱自動完成輸入值。

// since focusout will be called after optionSelected event called of 
// matAutoComplete, we are adding timeOut to delay focusOut operations
// and so we will have the true value of autoInput

onFocusOut() {
  setTimeout(() => {
    let input = this.autoInput.value;
    // filtering matching values from options and 
    // selecting first matched or set the default value
    let matchingOption = this._filter(input)[0] || 'DEFAULT VALUE';
    // now set the best matching option 
    // or let's call it autoSelects best match option for an user
    this.autoInput.setValue(matchingOption);
  }, 300);
}


   

這樣，我們將能夠在matInput上操作自動完成輸入值。

謝謝你。