Angular 17中含按钮的mat-form-field回车自动获焦异常问题

问题描述 #

在Angular 17表单中，当存在包含后缀按钮的mat-form-field控件时，在表单内其他输入控件（如单选按钮组）上按下回车键，焦点会自动跳转到该带按钮的输入框，此行为不符合预期。

代码示例 #

<form [formGroup]="reactiveForm">
  <mat-radio-group aria-label="Select a fruit" formControlName="radioFruit">
    <mat-radio-button aria-label="apples" value="apples">Apples</mat-radio-button>
    <mat-radio-button aria-label="oranges" value="oranges">Oranges</mat-radio-button>
  </mat-radio-group>

  <mat-form-field>
    <mat-label>Enter your password</mat-label>
    <input matInput type="text">
    <button mat-icon-button matSuffix>
      <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
    </button>
  </mat-form-field>
</form>

问题原因 #

表单内的<button>元素默认type为submit，当在表单控件上按下回车键时，浏览器会自动触发表单提交行为，并将焦点聚焦到表单内第一个submit按钮关联的输入控件上，也就是带后缀按钮的mat-form-field中的输入框。

解决方案 #

方案1：给按钮明确设置type="button" #

修改按钮类型，避免其被识别为提交按钮：

<button mat-icon-button matSuffix type="button">
  <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>

方案2：阻止单选组的回车键默认行为 #

在mat-radio-group上添加事件，拦截回车键的默认动作：

<mat-radio-group 
  aria-label="Select a fruit" 
  formControlName="radioFruit"
  (keydown.enter)="$event.preventDefault()"
>
  <mat-radio-button aria-label="apples" value="apples">Apples</mat-radio-button>
  <mat-radio-button aria-label="oranges" value="oranges">Oranges</mat-radio-button>
</mat-radio-group>

方案3：全局禁用表单的默认回车提交行为 #

如果表单不需要回车提交功能，可在<form>标签上直接拦截：

<form [formGroup]="reactiveForm" (keydown.enter)="$event.preventDefault()">
  <!-- 表单内容 -->
</form>

内容的提问来源于stack exchange，提问作者Mark