使用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值或过滤选项，等等来操作自动补全输入值。

// 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上操作自动补全输入值。

谢谢。