angular - 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();"

但是当我单击按钮时，会在单击按钮之前触发模糊，因此按钮会在单击事件发生之前消失。

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

标签： angularangular-materialangular-forms

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