如何避免Angular mat-label与浏览器自动填充内容重叠？

问题描述 #

在Angular 15项目中，使用Chrome 114.0.5735.199（64位）浏览器时，登录页面的密码输入框在浏览器自动填充内容后，出现mat-label与输入内容重叠的异常情况。密码字段代码如下：

<mat-form-field>
  <mat-label translate>common.password</mat-label>
  <input id="password-input" matInput type="password" formControlName="password" required/>
  <toggle-password matSuffix></toggle-password>
  <mat-icon matPrefix>lock</mat-icon>
</mat-form-field>

解决方法 #

1. 强制标签始终上浮 #

给mat-form-field添加floatLabel="always"属性，强制标签保持上浮状态，彻底避免重叠问题：

<mat-form-field floatLabel="always">
  <mat-label translate>common.password</mat-label>
  <input id="password-input" matInput type="password" formControlName="password" required/>
  <toggle-password matSuffix></toggle-password>
  <mat-icon matPrefix>lock</mat-icon>
</mat-form-field>

2. 手动触发标签状态更新 #

在组件代码中监听密码控件的值变化，手动触发输入框的交互事件，让标签正常上浮：

import { Component, AfterViewInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  // 组件元数据
})
export class LoginComponent implements AfterViewInit {
  loginForm: FormGroup;

  ngAfterViewInit(): void {
    const passwordControl = this.loginForm.get('password');
    if (passwordControl?.value) {
      const inputEl = document.getElementById('password-input');
      inputEl?.dispatchEvent(new Event('input'));
    }
  }
}

3. 禁用浏览器自动填充（不推荐） #

通过添加autocomplete="new-password"属性阻止浏览器自动填充，但会影响用户体验，仅适用于特殊场景：

<input id="password-input" matInput type="password" formControlName="password" required autocomplete="new-password"/>

4. 虚拟输入框hack方案 #

在真实密码输入框前添加隐藏的虚拟输入框，让浏览器优先填充虚拟框，避免干扰真实输入框的标签状态：

<mat-form-field>
  <!-- 虚拟输入框，用于接收浏览器自动填充 -->
  <input style="position: absolute; left: -9999px;" type="text" autocomplete="username">
  <input style="position: absolute; left: -9999px;" type="password" autocomplete="current-password">
  
  <mat-label translate>common.password</mat-label>
  <input id="password-input" matInput type="password" formControlName="password" required/>
  <toggle-password matSuffix></toggle-password>
  <mat-icon matPrefix>lock</mat-icon>
</mat-form-field>

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