In Angular 7 - how can I disabled chrome auto fill and manage password select list

Question

In Angular 7 - how can I disabled chrome auto fill and manage password select list?

Things I've tried:

autocomplete="off"
autocomplete="false"

This is my form:

<form class="col-12" [formGroup]="form" autocomplete="off" (ngSubmit)="onSubmit()">

  <label>Email*</label>
  <input type="email" formControlName="email" placeholder="" class="col-12 mb1 field">    

  <label>Password*</label>
  <input type="password" formControlName="password" placeholder="" class="col-12 mb1 field">

  <label>Confirm Password*</label>
  <input type="password" formControlName="confirmPassword" class="col-12 mb2 field">


  <button type="submit" [disabled]="!form.valid" class="btn btn-primary col-12" prevent-double-submit>Get Started</button>
</form>

Possible duplicate of [Disabling Chrome Autofill](https://stackoverflow.com/questions/15738259/disabling-chrome-autofill) — Reactgular, Dec 16 '18 at 16:48

score 2 · Answer 1 · answered Dec 16 '18 at 20:46

2

Try with this old but effective solution - autocomplete="new-password"

Chromium Issue 370363 reference

Stack overflow reference

answered Dec 16 '18 at 20:46

Mile Mijatović

2,120
1
18
32

I just want to turn chrome auto fill off on all my forms and their field types – AngularM Jan 03 '19 at 16:21
Does this solution works ? `autocomplete="new-password"` – Mile Mijatović Jan 03 '19 at 17:13
But what if it’s a none password input? – AngularM Jan 04 '19 at 17:31

score 1 · Answer 2 · edited Jan 05 '19 at 11:21

1

you can solve this issue by 2 ways,

1) Set autocomplete=null in your HTML.

2) If you are not interested in using null in HTML, you need to create a directive.

ng g d Autocomplete

and modify AutocompleteDirective class as following:

private element: HTMLInputElement;
  constructor(private elRef: ElementRef) {
  this.element = elRef.nativeElement;
}
ngOnInit() {
  this.element.autocomplete = null //this will override default autocomplete.
}

and in your template:

<input appAutocomplete type="email" formControlName="email" placeholder="" class="col-12 mb1 field">

edited Jan 05 '19 at 11:21

AngularM

13,932
27
78
151

answered Dec 16 '18 at 16:38

westdabestdb

3,123
13
27

Weird, which Angular version do you use ? – westdabestdb Dec 16 '18 at 17:12
I think I've made a mistake. Corrected it and uploaded [here](https://stackblitz.com/edit/angular-eetoke). – westdabestdb Dec 16 '18 at 17:14
I'm using angular 7 – AngularM Jan 03 '19 at 16:22

In Angular 7 - how can I disabled chrome auto fill and manage password select list

2 Answers2