Блог

У меня есть следующая форма имени пользователя и пароля в проекте angular, который использует angular-material. Мне нужен браузер (использующий 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 amp;amp; (username.dirty || username.touched) amp;amp; (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 атрибут автоматически получает значение «выкл» для поля ввода имени пользователя, как только я нажимаю на поле ввода имени пользователя, чтобы что-то ввести. Но не для пароля.

После первой перезагрузки перед вводом

После нажатия на поле ввода имени пользователя