Angular Material：奇怪的后缀功能

Question

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

即使包装有角材料的示例并将其包装成我得到相同的形式： 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>

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

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

我怎样才能防止这种行为并实际执行正常的预期行为（在输入键上提交表单）？

Answer 1

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