html - 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"),
      }
    );
  }
}

Answer 1

等待大神解答