输入 onChange 后设置图标

问题描述

我想在输入字段后添加图标，它会在更改时显示。 如果不在焦点上，则使用另一个图标。

谁能帮帮我 我尝试过类似下面的操作，但我不知道如何在其中切换图标。

<input matInput type="text" style="width: 200px;">
<button mat-mini-fab  style="float: right;" color="primary" (click)="element.disabled = !element.disabled">
  <mat-icon>{{element.disabled ? 'home' : 'edit'}}</mat-icon>
</button>

谢谢

解决方法

我找到了一种方法。

在 .ts 文件中定义两个布尔变量。并在输入元素的焦点和焦点外事件上更改值。

home: boolean = false;
edit:boolean = true;

onFocusOutEvent(event: any){
// toggle as you want to use it.
}
onFocusEvent(){
// toggle as you want to use it.
}

在 HTML 文件中

<input matInput type="text" [formControlName]="element.id" (focusout)="onFocusOutEvent($event)" (focus)="onFocusEvent($event)" >

<button style="float: right;" color="primary" *ngIf="edit">
     <mat-icon>edit</mat-icon>
</button>
<button *ngIf="home" style="float:left;">
<mat-icon>home</mat-icon>
</button>

希望对大家有所帮助。谢谢