Angular mat-icon show on focus

Question

So I have the following 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>

I'm using a reactive form with FormArray. But besides that I got problem with the event on a formcontrol. Touched is a nice one.

I tried to use:

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

But when I click the button the blur will trigger before the button click, so the button dissapears before the click event happens.

Any idea how to solve this?

Answer 1

I figured it out on my own. What happens is I call a different event the mouseDown. This event will trigger infront of the of the blur event and also not cancel it.

So what I changed was:

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

Into this (with the blur and focus event):

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