I have the following username-password form in a angular project which uses angular-material. What I want is the browser (using Google Chrome for testing), suggesting me the list of usernames I already have logged in with for different other sites. Even with autocomplete attributes set up in input fields I still cannot get browser suggesting me saved usernames. Any help on this is appreciated.
<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>
P.S.
In developer tools in chrome I found that the autocomplete attribute getting value 'off' automatically for username input field, just as I click on username input field to type something. But not for the password.
After first reload before typing
After clicking on username input field
