当您在表单中有一个带有按钮的 mat-form-field 时，当您按 Enter 键时，它会自动聚焦到该输入。这不是我们想要的

Question

在 Angular 17 中，如果您有一个带有按钮的 mat-form-field，如下所示，那么当您在表单中的任何其他表单输入（例如复选框、单选按钮）上按 Enter 时，它会自动将焦点放在通过按钮输入。这很奇怪，不是吗？我认为这是一个错误。

    <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>

Answer 1

如果您想摆脱此行为，可以使用

$event.stopPropogation()

停止自动选择。

<button mat-icon-button matSuffix (click)="$event.stopPropagation();hide = !hide">
  <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>

Stackblitz 演示

---

由于您在表单字段内有按钮，因此您将获得自动焦点，这是预期的行为。

<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>
  <br />
  <mat-form-field>
    <mat-label>Enter your password</mat-label>
    <input
      matInput
      [type]="hide ? 'text' : 'password'"
      formControlName="password"
    />
    <button mat-icon-button matSuffix (click)="hide = !hide">
      <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
    </button>
  </mat-form-field>
</form>

Stackblitz 演示

---