Angular项目中邮箱输入框无法触发HTML5原生自动补全功能

• 输入框类型不匹配：当前代码设置type="text"，浏览器只会给标记为type="email"的输入框匹配邮箱类自动补全规则，纯文本输入框默认不会触发邮箱专属的补全提示。
• 自动补全属性配置错误：autocomplete="new-email"的语义是告知浏览器该输入框用于录入全新的邮箱地址，需要屏蔽已保存的历史邮箱补全提示，刚好和你需要的自动补全效果相反。

修改输入框的两个核心属性即可，修改后完整代码如下：

<input class="generic-input" #emailInput autocomplete="email" type="email" formControlName="email"
        (blur)="trimSpace()" (keypress)="disallowSpace($event)"
        name="email">

具体修改说明：

• 将type属性值从text改为email，让浏览器正确识别当前输入框的用途为邮箱录入，关联对应的自动补全数据集
• 将autocomplete属性值从new-email改为email，明确告知浏览器需要弹出已保存的历史邮箱地址供用户选择补全

如果调整后仍未出现补全提示，可检查浏览器的自动补全功能是否正常开启，同时确认当前站点域名下有已保存的邮箱地址记录可供调用。

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