CODEWITHSUNDEEP
angular
Dada
Dada

Reputation: 65

Disable chrome autofill on <ng-autocomplete

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>

Upvotes: 0

Views: 341

Answers (1)

Milan Tenk
Milan Tenk

Reputation: 2715

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.)

Upvotes: 1

Related Questions