Angular mat-icon 显示焦点

Question

所以我有以下 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();"

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

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

Answer 1

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

所以我改变的是：

   <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>

Angular mat-icon 显示焦点

Angular mat-icon show on focus

angular

angular-material

angular-forms