0

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

<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会自动获得焦点。这会触发键盘在移动浏览器上向上滑动，并在视口抖动时让用户感到沮丧。如何防止这种行为？

我尝试制作自定义指令以应用于按钮，但无济于事。我也尝试将 counter 实现为 custom MatFormFieldControl，但它有自己的问题，所以这种方法是行不通的。

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

我对这种方法的唯一问题是，现在当值低于最小约束mat-error时，消息不会显示。所以 GitHub 讨论中提出的“解决方案”对于我的用例来说确实是一个破碎的可访问性问题。counterValidators.min

在不影响上述可访问性问题的情况下，如何防止matInput在按下/单击matPrefix和时获得焦点？matSuffixmat-form-field

4

1 回答 1

0

当你使用

input.value = '';

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

由于仅在触摸“FormControl”时才显示错误，因此使用 setValue 赋予值，您应该“手动”标记为触摸它

  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();
  }
于 2022-02-19T11:42:43.463 回答