Chrome自动填充覆盖已选文本：Angular表单场景问题求助

问题场景 #

我们的支付页面流程为：用户输入邮箱后点击「下一步」，若邮箱已存在则显示密码字段（不存在则进入新用户创建流程）。但在Chrome浏览器中，当用户选择自动填充的邮箱并提交后，密码字段会短暂显示，随后Chrome会重新自动填充邮箱字段，触发userEmail的setter，将hasSubmitted设为false，导致密码字段消失。

手动输入邮箱或选择的邮箱与Chrome预填充内容一致时，不会出现此问题。

简化实现代码 #

HTML模板 #

<div class="form">
  <form>
    <input [(ngModel)]="userEmail"
           type="email"
           name="username">

    @if(hasSubmitted) {
    <input type="password"
           name="password">

    }
  </form>

  <button (click)="onSubmit()">Next</button>
</div>

Angular组件代码 #

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from "@angular/forms"

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  
  private _email = "";
  public get userEmail() {
    return this._email;
  }
  public set userEmail(value) {
    this._email = value;
    this.hasSubmitted = false;
  }

  hasSubmitted = false;

  onSubmit() {
    this.hasSubmitted = true;
  }
}

问题原因 #

Chrome的自动填充机制会在表单提交后再次触发邮箱字段的内容更新，即使内容与之前一致，某些场景下仍会触发Angular的userEmail setter，导致hasSubmitted被重置为false，密码字段因此隐藏。

解决方案 #

方案1：优化setter逻辑，避免无意义重置 #

修改userEmail的setter，仅当新值与旧值实际不同时，才重置hasSubmitted：

public set userEmail(value) {
  if (this._email !== value) {
    this._email = value;
    this.hasSubmitted = false;
  }
}

这样即使Chrome重复填充相同内容，也不会触发hasSubmitted的重置，密码字段能保持显示状态。

方案2：限制密码字段自动填充 #

如果方案1无法解决问题，可针对密码字段设置autocomplete="new-password"，阻止Chrome自动填充密码（此方案会影响用户体验，仅作为备选）：

<input type="password"
       name="password"
       autocomplete="new-password">

方案3：提交时临时锁定状态 #

在onSubmit方法中添加临时锁定标记，避免后续自动填充触发状态重置：

private isSubmitting = false;

onSubmit() {
  this.isSubmitting = true;
  this.hasSubmitted = true;
  // 延迟解除锁定，给Chrome自动填充留处理时间
  setTimeout(() => {
    this.isSubmitting = false;
  }, 500);
}

public set userEmail(value) {
  if (!this.isSubmitting) {
    this._email = value;
    this.hasSubmitted = false;
  }
}

通过isSubmitting临时锁定，在提交后的短时间内忽略自动填充带来的字段更新，防止状态被意外重置。

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