Angular Material：奇怪的后缀功能

Question

所以我偶然发现了一个奇怪的... 我正在使用 angular material 的表单字段组件来创建我的表单... 我注意到，如果我在 mat 输入字段中使用一个按钮作为 matSuffix，如果我尝试从另一个字段提交表单（例如按回车键）......该字段获得焦点并且按钮（后缀）被点击.. .

甚至包装 angular material 的示例并将其包装在我得到相同的形式中： https://stackblitz.com/edit/angular-frc7tj?file=app/form-field-prefix-suffix-example.html

<div class="example-container">
  <form>
    <mat-form-field>
      <input
        matInput
        placeholder="Enter your password"
        [type]="hide ? 'password' : 'text'"
      />
      <button
        mat-icon-button
        matSuffix
        (click)="hide = !hide"
        [attr.aria-label]="'Hide password'"
        [attr.aria-pressed]="hide"
      >
        <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
      </button>
    </mat-form-field>

    <mat-form-field>
      <input
        matInput
        placeholder="Amount"
        type="number"
        class="example-right-align"
      />
      <span matPrefix>$&nbsp;</span>
      <span matSuffix>.00</span>
    </mat-form-field>
  </form>
</div>

只需在第一个（密码字段）中输入内容，然后单击“金额”字段并按回车键，观察会发生什么

第一个获得焦点，按钮后缀被点击....

如何防止这种行为并实际执行正常的预期行为（按回车键提交表单）？

Answer 1

只需将 type="button" 添加到表单内的按钮即可。默认情况下，type="submit" 正在使用并且您正尝试通过按 Enter 键来提交表单。参见 StackBlitz。

Angular Material：奇怪的后缀功能

Angular Material: Weird suffix fucntionality

angular-material