Angular mat-icon 聚焦显示答案

【问题标题】：Angular mat-icon show on focusAngular mat-icon 聚焦显示
【发布时间】：2019-05-02 14:50:01
【问题描述】：

所以我有以下html：

<mat-form-field>
   <input matInput id={{item.value.fieldID}} formControlName="view"
     placeholder={{item.value.displayname}} />
   <mat-error *ngIf="item.controls.view.valid"></mat-error>
   <button mat-button *ngIf="item.value.view" matSuffix mat-icon-button aria-label="Clear" (click)="clear(i, j)">
     <mat-icon>close</mat-icon>
   </button>
</mat-form-field>

我正在使用 FormArray 的反应形式。但除此之外，我对表单控件上的事件有疑问。感动是一个很好的。

我尝试使用：

*ngIf="item.value.view && item.controls.view.touched"
(blur)="item.controls.view.markAsUntouched();"
(focus)="item.controls.view.markAsTouched();"

但是当我点击按钮时，模糊会在按钮点击之前触发，所以按钮会在点击事件发生之前消失。

知道如何解决这个问题吗？

【问题讨论】：

您可以尝试在 ts 文件上调用 setTimeout 内的操作，而不是直接在模板上调用它。
@jpavel 这不是一个选项，因为它用于移动设备，而旧手机会延长超时时间。
您能否详细说明您想要实现的目标？它似乎是当您悬停组件时应该出现的关闭图标按钮，对吗？关于移动设备，您可以执行一个零延迟的setTimeout => 我们只想将操作放在事件循环内的行尾。
我想清除输入字段中的值，只有当它被聚焦时。这就是clear(i,j) item.controls.view.patchValue('') 正在做的事情。我认为最好的方法是用最后的图标来做到这一点。

标签： angular angular-material angular-forms

【解决方案1】：

我自己想出来的。发生的情况是我将另一个事件称为mouseDown。该事件会在模糊事件之前触发，也不会取消。

所以我改变的是：

   <button mat-button *ngIf="item.value.view" matSuffix mat-icon-button aria-label="Clear" (click)="clear(i, j)">
     <mat-icon>close</mat-icon>
   </button>

进入这个（带有模糊和焦点事件）：

<mat-icon *ngIf="item.value.view && item.controls.view.touched" matSuffix (mousedown)="clear(i, j);">close</mat-icon>

【讨论】：