Chrome为Angular Material日期选择器提示保存密码，如何关闭该功能？

相关代码 #

HTML #

<mat-form-field appearance="fill">
    <mat-label>Start date</mat-label>
    <input type="text" matInput [formControl]="startDate" [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

TS #

startDate = new FormControl();

当前页面仅存在2个输入框，页面展示如下：

原因 #

Chrome的密码保存提示是基于自身的自动填充识别规则触发的，它会扫描页面上的输入框组合，只要识别到疑似账号+密码的输入框组合，就会把同页面的其他输入框默认归到同一个表单组里，触发保存提示。你这里的日期选择器用的是type="text"的输入框实现，进一步提升了误判概率。

解决方案 #

• 优先给非账号密码的输入框添加autocomplete属性关闭自动填充识别，修改你的日期输入框代码即可：

<input type="text" matInput [formControl]="startDate" [matDatepicker]="picker" autocomplete="off">

如果autocomplete="off"不生效，可以换成autocomplete="none"，对新版Chrome的适配性更好。

• 如果是整个表单都不需要Chrome的自动填充功能，可以直接在<form>标签或者外层的mat-form容器上添加autocomplete="off"属性。
• 如果页面上确实存在密码输入框，给密码输入框添加autocomplete="new-password"属性，就能避免Chrome把同页面的其他输入框判定为登录表单的一部分，也就不会误触发其他输入框的密码保存提示了。
• 额外优化：如果不需要兼容旧浏览器，可以把日期输入框的type改为date，也能大幅降低Chrome的误判概率。

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