使用角垫自动完成功能保存(对焦) [英] Save on (focusout) with angular mat-autocomplete

问题描述

我有一个简单的自动完成输入

I have a simple input with autocomplete

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

我想在用户不再使用输入字段时保存输入值

I want to save the input value when the user is no longer using the input field

问题是，当我单击自动完成选项时，将调用输入字段的聚焦功能.

The issue is when i am clicking on a autocomplete option focusout function of input field is called.

保存输入值以检查自动填充和输入字段状态的我有哪些选择

What are my options to save input value which checks both autocomplete and input field status

谢谢

推荐答案

如果您只想处理自动完成选项的单击，则应在该选项上使用(click)来处理它.

If you ONLY want to handle the clicking on autocomplete option you should use (click) on that option to handle it.

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

但是，如果您想重点关注，这将起作用:

However, if you want to do it with focus, this will work:

<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

这篇关于使用角垫自动完成功能保存(对焦)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！