Угловая циновка-иконка в фокусе - PullRequest
Новая
       20

Угловая циновка-иконка в фокусе

0 голосов
/ 30 апреля 2019

Итак, у меня есть следующий 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();"

Но когда я нажимаю кнопку, размытие сработает до нажатия кнопки, поэтому кнопка исчезает до того, как произойдет событие нажатия.

Есть идеи, как решить эту проблему?

1 Ответ

0 голосов
/ 02 мая 2019

Я понял это самостоятельно. Что происходит, я называю другое событие 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>
...