单击 matPrefix/matSuffix 时如何防止 matInput 聚焦？

Question

我正在尝试实现一个计数器表单域。它有两个按钮；一种用于递增计数值，另一种用于递减计数值。到目前为止，实施非常简单。

<mat-form-field>
    <button matPrefix mat-icon-button (click)="onDecrement()">
        <mat-icon svgIcon="remove"></mat-icon>
    </button>

    <input type="number" matInput [formControl]="counter">

    <button matSuffix mat-icon-button (click)="onIncrement()">
        <mat-icon svgIcon="add"></mat-icon>
    </button>

    <mat-error *ngIf="counter.errors?.['min']">...</mat-error>
</mat-form-field>

但是，例如，当我单击 matSuffix 增量按钮时，matInput 会自动获得焦点。这会触发键盘在移动浏览器上向上滑动，并在视口随之抖动时让用户感到沮丧。我该如何防止这种行为？

我尝试制作自定义指令以应用于按钮但无济于事。我也尝试将计数器实现为自定义 MatFormFieldControl，但它有其自身的问题，因此这种方法是行不通的。

我能找到的唯一与我的问题相关的资源是 GitHub issue。根据它，我应该将 $event 绑定到 onDecrement() 和 onIncrement() 方法上，然后在绑定的事件对象上调用 .stopPropagation()。有效！按递增和递减按钮时不再显示键盘。

我使用该方法的唯一问题是，现在当 counter 值低于最小 Validators.min 约束时，mat-error 消息不会显示。因此，GitHub 讨论中提出的“解决方案”对于我的用例来说确实是一个损坏的可访问性问题。

如何在 matPrefix 上的 pressing/clicking 和 mat-form-field 内的 matSuffix 时防止 matInput 获得焦点，同时不影响上述可访问性问题？

Answer 1

当你使用

input.value = '';

您唯一要做的就是更改 DOM（但不是控件的值）

由于错误仅在触摸“FormControl”时显示，此外使用 setValue 赋值，您应该“手动”将其标记为 Touched

  onDecrement(evt:any){
    this.counter.setValue((+this.counter.value)-1)
    this.counter.markAsTouched()
    evt.stopPropagation();
  }
  onIncrement(evt:any){
    this.counter.setValue((+this.counter.value)+1)
    this.counter.markAsTouched()
    evt.stopPropagation();
  }

单击 matPrefix/matSuffix 时如何防止 matInput 聚焦？

How to prevent matInput from focusing when clicking on matPrefix/matSuffix?

angular-material

angular

mat-input

mat-form-field