How to disable the annoying Google Chrome form autocomplete with Angular

Did you ever felt the frustration of Chrome’s form autocomplete suggesting values to your inputs that are not suitable to their context ?

Chrome’s autocomplete suggestions.

And even worst, when you select a value from the suggestions, you get this ugly effect on your inputs :

The ugly blue effect that you get after selecting a value from the suggestions.

If like me, you want your forms to be clean and coherent, here is how to disable Chrome’s autocomplete on your forms :

The idea is to have the following HTML attributes on your inputs :

The 4 attributes to put on html inputs in order to disable autocomplete.

Now let’s see how to do it the Angular way :

It would be a boring and repeating task to put these 4 HTML attributes on all your HTML inputs, we can do better thanks to Angular Directives.

Start by generating a directive called autocomplete-off :

ng g d autocomplete-off

Then, paste the following code in autocomplete-off.directive.ts

autocomplete-off.directive.ts

Finally, you can use the directive directly on your inputs by specifying the directive’s selector :

Using the Angular autocompleteOff directive

This directive will put the 4 attributes on your inputs regardless of the browser being used, if you want to, you can edit the directive in order to add the attributes only if the browser is Google Chrome.

In order to turn off the autofill only for Google Chrome user agent, we start by detecting it, Google Chrome adds the attribute chrome to the global window object, we can check for this attribute in order to detect Google Chrome.

The final code :

The final code

That’s it

If this article helped you get rid of the annoying Google Chrome form auto-fill, feel free to let a comment below, and/or hit the 👏 button.

Lead Software Engineer working across multiple technologies and frameworks. Always willing to challenge my problem solving skills.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store