用户名/密码浏览器自动填充不起作用

Question

我在使用角度材料的角度项目中有以下用户名密码形式。我想要的是浏览器（使用 Google Chrome 进行测试），向我建议我已经登录不同其他网站的用户名列表。即使在输入字段中设置了

autocomplete

属性，我仍然无法让浏览器建议我保存用户名。对此的任何帮助表示赞赏。

<form (ngSubmit)="onSubmit()" autocomplete="on">
  <mat-card-content>
    <mat-form-field appearance="outline">
      <mat-label>Username</mat-label>
      <input matInput [(ngModel)]="credential.username" name="username" id="username" #username="ngModel" pattern='\S+_\d{6}' autocomplete="username">
      <mat-error *ngIf="username.invalid && (username.dirty || username.touched) && (username.errors?.pattern)">
        Please enter a valid username
      </mat-error>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Password</mat-label>
      <input type="password" matInput placeholder="Password" [(ngModel)]="credential.password" name="password" id="password" #password= "ngModel" autocomplete="current-password">
    </mat-form-field>
  </mat-card-content>
  <button type="submit" mat-stroked-button color="accent" [disabled]="username.invalid || password.invalid">Log in</button>
</form>

附注

在 Chrome 的开发人员工具中，我发现

autocomplete

属性会自动为用户名输入字段获取值“off”，就像我单击用户名输入字段来输入内容一样。但不是为了密码。

打字前首次重新加载后

点击用户名输入字段后

Answer 1

你解决这个问题了吗？我目前还在 autocomplete="username" 上设置了输入，但在 Chrome 中，它只是不会自动填充，直到我在输入中键入内容。然后会弹出一个窗口，我可以选择用户名。