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

Question

我目前正在开发具有“更改当前密码”功能的角度应用程序。但是，如果我在关联的输入字段中输入我的旧密码和新密码，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>

结果：

Change password form

如果我在“旧密码”输入中键入“ foo”，并输入“ bar”作为新密码，并从“更改密码”视图中移开，将出现以下保存密码提示：

Wrong save password prompt

如您所见，旧密码被解释为用户名。如果有人想在现场环境中向一群人展示功能，那将是一个很大的问题。特别是如果他或她在其他域中使用他的“旧密码”。

有人知道如何禁用或抑制此行为吗？或者，如果无法禁用它，也许有一种方法可以更改行为，以使当前用户成为用户名部分的值。我已经尝试用type = text和autocomplete =“ username”添加一个只读输入字段，但是它对我没有用。

亲切的问候，

David

Answer 1

事情是chrome使用它来跟踪保存的密码，据我所知，我们不能禁用它，但是可以覆盖它。问题是弹出窗口会检查UI中是否有type =“ password”字段，因此您可以使用ngIf切换到没有输入type =“ password”字段的视图，我认为这可以解决问题]

<form *ngIf="submitted" 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>
<div *ngIf="!submitted">
  <p>Loading.....</p>
</div>