Disable autofill/autocomplete with angular form and chrome

Question

I have a simple form where I need disable autofill/autocomplete with angular form.

I have search on StackOverflow, but I didn´t find a solution.

I have used autocomplete="off" or autocomplete="false" but the autocomplete is never disabled.

Sometimes the autocomplete is disabled temporarily when I load a page. But, after some time after, when I reload the page the problem appears again.

//markup from image above

<input type="text" class="form-control input-lg ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" capitalize-full="" ng-model="user.ENDERECO" required="" placeholder="Digite seu endereço" autocomplete="off" name="street" style="opacity: 1; text-transform: uppercase;">

//markup sample

<form class="form form-horizontal" name="regForm" 
              autocomplete="false" novalidate role="form">
 <input  type="text" class="form-control input-lg"                           
  name="cpf" ng-model="user.CPF" placeholder="Digite seu CPF" 
   required autocomplete="false" >
</form>

Answer 1

In April 2018: Setting autocomplete="off" on the form itself worked for me (tested on Chrome). Setting this attribute on individual elements did not work.

Answer 2

Simply put autocomplete="new-feildName" on html control

Example :

 <input class="signup-input-field-01" autocomplete="new-phone" 
            formControlName="phone" name="phone" type="text">

Answer 3

The autocomplete="off" is effectively respected by Chrome, but what you're experiencing is the Chrome autofill functionality that takes over, ignoring autocomplete="off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.

In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data.

I did some test and from what I see here Chrome igonores the autocomplete="off" when it can map the fieldname to one of it's autofill properties. This will work <input type="text" name="somethingAutofillDoesntKnow" autocomplete="off" />, but for this fieldName Autofill will show up <input type="text" name="firstName" autocomplete="off" />.

One workaround is to put an unknown value in the autocomplete, e.g. autocomplete="doNotAutoComplete". When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.

My advise is not to fight against it and use it's potential by properly using the autocomplete attribute as explained here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill