How to turn autocomplete off in Angular using FormBuilder

Question

When I open a dialog that contains two fields, password and confirmpassword, they are always autofilled which results in the form validation throwing an error. I have set the autocomplete="off" attribute on both inputs as well as the form itself but this isn't working. Appreciate any help!

<form [formGroup]="passwordForm" (ngSubmit)="submit()" autocomplete="off">

    <div>
        <h4>Create New Password</h4>
    </div>

    <mat-form-field class="form-field">
        <mat-label>Password</mat-label>
        <input #passwordInput matInput formControlName="password" type="password" class="form-control"
            matTooltip="{{passToolTip}}" [(ngModel)]="password" required autofocus autocomplete="off">
        <mat-error *ngIf="passwordForm.controls.password.touched && passwordForm.controls.password.invalid">
            <span *ngIf="passwordForm.controls.password.errors.required">This field is mandatory.</span>
            <span *ngIf="passwordForm.controls.password.errors.minlength">At least 8 characters
                long</span>
        </mat-error>
    </mat-form-field>

    <mat-form-field class="form-field">
        <mat-label>Confirm Password</mat-label>
        <input matInput formControlName="confirmPassword" type="password" class="form-control"
            [(ngModel)]="confirmPassword" required autocomplete="off">
        <mat-error
            *ngIf="passwordForm.controls.confirmPassword.touched && passwordForm.controls.confirmPassword.invalid">
            <span *ngIf="passwordForm.controls.confirmPassword.errors.required">This field is
                mandatory.</span>
            <span *ngIf="passwordForm.controls.confirmPassword.errors.mustMatch">Passwords do not
                match</span>
        </mat-error>
    </mat-form-field>

    <div class="buttons">
        <button mat-raised-button color="lightgrey" (click)="cancel()">
            <fa-icon [icon]="faTimesCircle"></fa-icon> Cancel
        </button>
        <button mat-raised-button color="primary" type="submit" [disabled]="!passwordForm.valid">Submit</button>
    </div>
</form>

export class UpdatePasswordModal implements OnInit {
  @ViewChild('passwordInput', { static: false }) passwordElement: ElementRef;

  public passwordForm: FormGroup;
  public password: string;
  public confirmPassword: string;
  public passToolTip: string = PasswordHelper.passToolTip;


  constructor(
    private userService: UserService,
    private formBuilder: FormBuilder,
    private _snackBar: MatSnackBar,
    private spinner: NgxSpinnerService,
    public dialogRef: MatDialogRef<UpdatePasswordModal>,
    @Inject(MAT_DIALOG_DATA) public data: ResetPassword) { }

  ngOnInit() {
    this.initializeForm();
  }

  ngAfterViewInit() {
    this.passwordElement.nativeElement.focus();
  }

  private initializeForm(): void {
    this.passwordForm = this.formBuilder.group(
      {
        password: [
          "",
          [
            Validators.required,
            Validators.pattern(PasswordHelper.passregex),
            Validators.minLength(PasswordHelper.MIN_LENGTH),
          ],
        ],
        confirmPassword: ["", Validators.required]
      },
      {
        validator: MustMatch("password", "confirmPassword"),
      }
    );
  }
}

antoineso · Accepted Answer · 2021-01-23 07:00:59Z

According to MDN documentation we can read that:

If a site sets autocomplete="off" for a , and the form includes username and password input fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page. If a site sets autocomplete="off" for username and password fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.

One solution is to pass autocomplete="new-password" to the input because modern browsers have stopped autofilling <input> elements with autocomplete="new-password". So try this:

<mat-form-field class="form-field">
        <mat-label>Password</mat-label>
        <input #passwordInput matInput formControlName="password" type="password" class="form-control"
            matTooltip="{{passToolTip}}" [(ngModel)]="password" required autofocus autocomplete="new-password">
        <mat-error *ngIf="passwordForm.controls.password.touched && passwordForm.controls.password.invalid">
            <span *ngIf="passwordForm.controls.password.errors.required">This field is mandatory.</span>
            <span *ngIf="passwordForm.controls.password.errors.minlength">At least 8 characters
                long</span>
        </mat-error>
    </mat-form-field>

    <mat-form-field class="form-field">
        <mat-label>Confirm Password</mat-label>
        <input matInput formControlName="confirmPassword" type="password" class="form-control"
            [(ngModel)]="confirmPassword" required autocomplete="new-password">
        <mat-error
            *ngIf="passwordForm.controls.confirmPassword.touched && passwordForm.controls.confirmPassword.invalid">
            <span *ngIf="passwordForm.controls.confirmPassword.errors.required">This field is
                mandatory.</span>
            <span *ngIf="passwordForm.controls.confirmPassword.errors.mustMatch">Passwords do not
                match</span>
        </mat-error>
    </mat-form-field>

If this don't help you to resolve your issue may be you can find some answers in this Gist Page

Collectives™ on Stack Overflow

How to turn autocomplete off in Angular using FormBuilder

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related