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 Continue reading...
