Disable chrome autofill on

Question

I'm using an <ng-autocomplete for users to select their city, state, and zip. I tried to disable chrome's autofill using "autocomplete = "none" just like regular inputs, but it doesn't work, I think because this isn't an html input.

Is there a way to disable chrome's autofill on this field?

My code:

<ng-autocomplete
  [data]="countryObject"
  [searchKeyword]="keyword"
  [initialValue]="initialVal"
  placeholder="Search Country"
  (selected)="selectEvent($event)"
  (inputChanged)='onChangeSearch($event)'
  (inputFocused)='onFocused($event)'
  [itemTemplate]="itemTemplate"
  [notFoundTemplate]="notFoundTemplate"
  formControlName="country"
  [ngClass]="{ 'is-invalid': submitted && f.country.errors }"
  required
  >
</ng-autocomplete>

Try this: https://stackoverflow.com/questions/52139123/is-there-a-way-to-disable-chrome-autofill-option-for-angular-form-fields — Alberto Valerio, Sep 24 '21 at 19:28
@AlbertoValerio tried that and it does not work, only works on my fields not my — Dada, Sep 24 '21 at 19:34

Milan Tenk · Answer 1 · 2021-09-26T17:52:38.827

1

Generally to disable the autofill of Chrome the autocomplete and name html attributes of the <input> should be set to a generated random string value. (Or at least for me this was the only working solution to get rid of the autofill.)

I just played around a little bit with the ng-autocomplete on this stackblitz: https://stackblitz.com/edit/angular-ng-autocomplete

Unfortunatelly I did not find any possibility to overwrite the autocomplete and name html attributes through Angular parameters. I also posted a question about it here: https://github.com/sengirab/ngAutocomplete/issues/39

So now I guess there is no better way, than accessing the nativeElement of ng-autocomplete from a component/directive code, find the <input> inside it and update the above written attribute values to a generated random string. (The string needs to be different every time the site is loaded, this is why it needs to be generated.)

edited Sep 26 '21 at 17:52

answered Sep 25 '21 at 11:46

Milan Tenk

2,415
1
17
24

`[historyIdentifier]="null"`? – Eliseo Sep 26 '21 at 19:03
Setting `historyIdentifier="null"` does not influence the `autocomplete="off"` value of the `` element inside. Or did you make it with this parameter? – Milan Tenk Sep 26 '21 at 19:15
make "historyIdentifier" to null makes that the ng-autocomplete don't show the last selected values in the component (don't store in localstore anything) I think that @Dada asked about this – Eliseo Sep 26 '21 at 19:19
The question is about disabling the autofill of chrome. – Milan Tenk Sep 26 '21 at 19:21

Disable chrome autofill on

1 Answers1