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 ?
And even worst, when you select a value from the suggestions, you get this ugly effect on your inputs :
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 :
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
Finally, you can use the directive directly on your inputs by specifying the directive’s selector :
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 :
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.
Stories from the same author:
The Weirdest Java Interview Questions That You Ever Heard Of
This is a post that gathers the weirdest Java interview questions that I personally faced during job interviews or…
Build a web bot in 2 minutes 🤖
There is a ton of repetitive tasks that we can automate thanks to bots, in this article i’ll show you the easiest and…