如何在角度表单字段上禁用浏览器自动完成功能？

Question

I have a login page, i want to stop autocomplete and auto fills in my form page.

By using autocomplete="off" auto fill Stopped. But autocomplete still load when i click the input fields (password or user name fields). how to stop this autocomplete ?

I tried the following methods, autocomplete="off", autocomplete="false", autocomplete="new-password" but still it came.

My sample code :

<form #f="ngForm" autocomplete="off">
  <mat-form-field floatLabel="auto">
    <mat-label>User name</mat-label>
    <mat-icon matPrefix>person</mat-icon>
    <input matInput 
           tabindex="1" 
           #username="ngModel"
           [(ngModel)]="userName" 
           required 
           name="username"
           maxlength="100" 
           autocomplete="off" 
           role="presentation">
  </mat-form-field>
  <mat-form-field floatLabel="auto">
    <mat-label>Password</mat-label>
    <mat-icon matPrefix>lock</mat-icon>
    <input matInput 
           tabindex="2" 
           [(ngModel)]="password" 
           required 
           name="password" 
           #pass="ngModel" 
           type="password" 
           maxlength="100"
           autocomplete="new-password" 
           role="presentation">
  </mat-form-field>
</form>

Google chrome version: Version 76.0.3809.100 (Official Build) (64-bit)

Answer 1

在自动完成和随机名称上添加“anystring”以进行标记。

autocomplete="anyrandomstring" name="test"