How to disable auto fill (autocomplete) in password field (chrome and firefox)

Question

I have implemented 'change password' functionality and it has 'old password', 'new-password' and 'retype password' fields. All these passwords fields suggest some other user account's passwords as auto-complete fields. How to disable autocomplete in password fields. (chrome version-83.0.4103.116, Firefox version-78.0.1)

I have tried the following, and put in both form and input fields.

autocomplete ="off" 
autocomplete ="nope"
autocomplete ="false"
autocomplete ="new-password"

none of these are working.

my password input code as below

<div class="form-group col">
   <label for="oldPassword">Old Password</label>
   <input type="password" formControlName="oldPassword" class="form-control" [ngClass]="{ 'is-invalid': submittedupdatepassword && updatepassform.oldPassword.errors }" />
   <div *ngIf="submittedupdatepassword && updatepassform.oldPassword.errors" class="invalid-feedback">
   <div *ngIf="updatepassform.oldPassword.errors.required">old password is required</div>
   </div>
</div>

 <form [formGroup]="updatepasswordform" (ngSubmit)="updatePassword()">
        
            <div class="form-row">
                <div class="form-group col">
                    <label for="oldPassword">Old Password</label>
                    <input type="password" formControlName="oldPassword" class="form-control" [ngClass]="{ 'is-invalid': submittedupdatepassword && updatepassform.oldPassword.errors }" />
                    <div *ngIf="submittedupdatepassword && updatepassform.oldPassword.errors" class="invalid-feedback">
                        <div *ngIf="updatepassform.oldPassword.errors.required">old password is required</div>
                    </div>
                </div>
                <div class="form-group col">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col">
                    <label for="newPassword">New Password</label>
                    <input type="password" formControlName="newPassword" class="form-control" [ngClass]="{ 'is-invalid': submittedupdatepassword && updatepassform.newPassword.errors }" />
                    <div *ngIf="submittedupdatepassword && updatepassform.newPassword.errors" class="invalid-feedback">
                        <div *ngIf="updatepassform.newPassword.errors.required">password is required</div>
                        <div *ngIf="updatepassform.newPassword.errors.minlength">password should contain minimum 8 characters</div>
                        <div *ngIf="updatepassform.newPassword.errors.pattern">* Minimum eight in length.<br />
                            * At least one upper and one lower case English letter.<br />
                            * At least one digit.<br />
                            * At least one special character [#?!@$%^&*-].<br /></div>
                    </div>
                    
                </div>
                <div class="form-group col"></div>
            </div>
            <div class="form-row">
                <div class="form-group col">
                    <label for="confirmPassword">Retype Password</label>
                    <input type="password" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submittedupdatepassword && updatepassform.confirmPassword.errors }" />
                    <div *ngIf="submittedupdatepassword && updatepassform.confirmPassword.errors" class="invalid-feedback">
                        <div *ngIf="updatepassform.confirmPassword.errors.required">Retype password is required</div>
                    </div>
                </div>
                <div class="form-group col"></div>
            </div>
            <div class="errMsg" >{{errorMsg}}</div>
            <div class="successMsg" >{{successMsg}}</div><br>

            <div class="form-group">
                <button  class="col-sm-2 update-btn btn btn-sm btn-rectangle btn-default text-case">
                    
                    Upadate
                </button>
               
            </div>
        </form>  

Answer 1

Try autocomplete="new-password". This is recognized by modern browsers as a hint that they shouldn't offer to fill in password fields with saved passwords. (However, browsers will still offer to remember the password the user enters after they finish the form.)

Completely disconnecting a password field from browsers' password managers is deliberately made impossible. This is because modern browsers prioritize security practices over developer flexibility, so security features like password managers are not something developers can opt out of. If you really need to have a password field that doesn't use password managers, you likely need to write some JavaScript to get a non-password text field to mask its input.

This Mozilla Developer Network article goes into more detail: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields

Answer 2

Please change

auto-complete ="off"

To

autocomplete="off"