Angular密码字段mat-icon-button matSuffix点击触发页面刷新问题

Angular初学者开发登录页面时，使用mat-icon-button配合matSuffix实现密码显示/隐藏切换功能，每次点击显隐图标都会触发页面刷新，所有表单输入字段被清空重置。对应实现代码复制自Angular Material官方组件示例，相同代码在官方示例站点可正常运行，本地项目运行时出现上述异常。

<div class="form-field">
  <mat-form-field class="field-full-width" appearance="fill">
    <mat-label>Enter your password</mat-label>
    <input matInput [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>
</div>

<button>元素如果未显式声明type属性，浏览器会默认将其识别为type="submit"类型的提交按钮。官方示例中该密码字段组件外层没有包裹<form>标签，点击按钮不会触发提交行为，因此运行正常；本地项目中该组件被放置在表单容器内，点击按钮时会触发表单默认提交逻辑，最终导致页面刷新、表单内容重置。

• 为显隐切换按钮显式添加type="button"属性，明确标记该按钮为普通交互按钮，不触发表单提交，修改后的按钮代码如下：

<button
  mat-icon-button
  matSuffix
  type="button"
  (click)="hide = !hide"
  [attr.aria-label]="'Hide password'"
  [attr.aria-pressed]="hide"
>
  <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
</button>

• 若添加type="button"后问题仍存在，可按以下方向排查：
  • 检查点击事件绑定的逻辑中是否存在未捕获的运行时异常，导致Angular应用崩溃触发页面重载
  • 检查是否存在全局事件监听误绑定，错误将按钮点击动作关联到了页面跳转/刷新逻辑
  • 检查表单标签上是否绑定了无效的提交事件处理逻辑，触发了默认表单提交行为

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