在 chrome 中禁用或更改“保存用户名/密码”提示的行为

Dav*_*vid 6 html angular

我目前正在开发具有“更改当前密码”功能的 Angular 应用程序。但是,如果我在关联的输入字段中输入旧密码和新密码,Chrome 会将它们识别为用户名和密码,尽管这些字段都被声明为密码类型。所以在我的理解中,Chrome 不应该有机会从表单中保存用户名,因为没有输入字段type="text"autocomplete="username"。这是一些代码来指定我的问题:

<form class="changePwForm" [formGroup]="changePwForm">
    <mat-form-field appearance="legacy">
        <mat-label>Old Password</mat-label>
        <input matInput [type]="hideOldPw ? 'password' : text" formControlName="oldPassword" autocomplete="current-password">
        <button mat-icon-button matSuffix (click)="hideOldPw = !hideOldPw" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
            <mat-icon>{{hideOldPw ? 'visibility_off' : 'visibility'}}</mat-icon>
        </button>
    </mat-form-field> 
    <br>
    <mat-form-field appearance="legacy">
        <mat-label>New password</mat-label>
        <input matInput [type]="hideNewPw ? 'password' : text" formControlName="newPassword" autocomplete="new-password">
        <button mat-icon-button matSuffix (click)="hideNewPw = !hideNewPw" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
            <mat-icon>{{hideNewPw ? 'visibility_off' : 'visibility'}}</mat-icon>
        </button>
    </mat-form-field>
    <mat-form-field appearance="legacy">
        <mat-label>Repeat new password</mat-label>
        <input matInput [type]="hideNewPwRepeat ? 'password' : text" formControlName="newPasswordRepeat" [errorStateMatcher]="errorStateMatcher" autocomplete="new-password">
        <button mat-icon-button matSuffix (click)="hideNewPwRepeat = !hideNewPwRepeat" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
            <mat-icon>{{hideNewPwRepeat ? 'visibility_off' : 'visibility'}}</mat-icon>
        </button>
        <mat-error *ngIf="changePwForm.hasError('notSame')">
            Passwords do not match
        </mat-error> 
    </mat-form-field>
    <button mat-stroked-button type="submit" [disabled]="!changePwForm.valid" (click)="onSubmit()">Submit</button>
</form>
Run Code Online (Sandbox Code Playgroud)

结果是:

在此处输入图片说明

如果我在旧密码输入中输入“foo”并输入“bar”作为新密码并离开我的“更改密码”视图,则会出现以下保存密码提示:

保存密码错误提示:

在此处输入图片说明

如您所见,旧密码被解释为用户名。如果有人想在现场环境中在一群人面前演示该功能,那将是非常有问题的。特别是如果他或她在其他域中使用他的“旧密码”。

有人知道如何禁用或抑制这种行为吗?或者如果无法禁用它,也许有一种方法可以更改行为,以便当前用户是用户名部分的值。我已经尝试添加一个带有 type=text 和 autocomplete="username" 的只读输入字段,但它对我不起作用。