Html Angular Material Hide Password 在输入时切换

我是新来的Angular ，我有一个项目，已经有一个用户名和密码输入登录.密码输入有一个显示密码的按钮.问题是，当我进入密码输入区域并按下Enter时，它会切换按钮以显示密码，而不是提交表单.我怎么才能改变这一点呢？

Component.html

<div style="text-align: center" class="centered">
  <form [formGroup]="form">
    <br>
    <mat-form-field appearance="fill">
      <mat-label>Username</mat-label>
      <input name="username" formControlName="username" matInput>
    </mat-form-field>
    <br>
    <mat-form-field appearance="fill">
      <mat-label>Password</mat-label>
      <input name="password" formControlName="password" matInput [type]="passwordVisible ? 'text' : 'password'">
      <button mat-icon-button matSuffix (click)="passwordVisible = !passwordVisible" [attr.aria-label]="'Hide password'"
              [attr.aria-pressed]="!passwordVisible">
        <mat-icon>{{passwordVisible ? 'visibility' : 'visibility_off'}}</mat-icon>
      </button>
    </mat-form-field>
    <br>
    <button (click)="login()" mat-raised-button>Login</button>
    <button (click)="navigateToRegister()" mat-raised-button color="primary" style="margin-left: 10px">Register</button>
  </form>
</div>