Angular mat-form-filed input disable autocomplete

Question

I am using angular material for all my controls. We have a requirement to disable auto-complete so that any previously typed value will not show up. I have my code as below. I tried autocomplete "off" "disabled" and other suggestions that I found online. But nothing seems to work.

<mat-form-field
  [ngClass]="{ 'invalid-uinque-id': (form.errors.locatorId || form.errors.locatorIdInvalidBadge) }"
  id="sta_BadgeFormField"
>
  <input
    formControlName="locatorId"
    (blur)="onBlurLocatorVendorMethod(selectedVendor.id)"
    matInput
    i18n-placeholder="Locator Badge ID|Placeholder for locator badge id label in add staff dialog@@addstaffLocatorBadgeId"
    placeholder="Locator Badge ID"
    name="locatorId"
    maxlength="20"
    [errorStateMatcher]="esMatcher"
    autocomplete="disabled"
  /> 
</mat-form-field>

Answer 1

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.

One workaround is to put an unknown value in the autocomplete,

<input type="text" name="somethingAutofillDoesntKnow" 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.

<fieldset>
   <legend>Ship the blue gift to...</legend>
   <p> <label> Address:     <textarea name=ba autocomplete="section-blue shipping street-address"></textarea> </label>
   <p> <label> City:        <input name=bc autocomplete="section-blue shipping address-level2"> </label>
   <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
</fieldset>

BUT (Directive)

If you still want to keep focusing on disabling part, here is the closest solution for you to achieve this with directive.

import { Directive, HostBinding, Attribute } from '@angular/core';

@Directive({
    selector: '[matInput]',
})
export class AutocompleteOffDirective {

    @HostBinding('attr.autocomplete') auto;
    constructor(@Attribute('autocomplete') autocomplete: string) {
        this.auto = autocomplete || 'off'
    }

}

Answer 2

You can try this to disable autocomplete for all of controls. It works for me.

<form autocomplete="off">

Answer 3

You could use autocomplete="off" for classical browser whereas for modern browser you could use autocomplete="nope" like below:

Classical browser:

<input name="name" ng-model="name" autocomplete="off"/>

Modern browser:

<input name="name" ng-model="name" autocomplete="nope"/>

Answer 4

The autocomplete behaviour of browsers is linked to the name attribute of your control. This issue is actually not related to Angular, is more a browser issue, Google Chrome is particularly hard to deal with on the subject.

Solution 1:

The following solution may work, however at least once Google Chrome stopped supporting it, the value that should work is autocomplete="off", if not please try the second solution:

<!-- removed everything but the changes for the sake of simplicity -->
<mat-form-field ...>
  <input
    ...
    autocomplete="off"
  /> 
</mat-form-field>

Solution 2:

This is the one I ended up using for my project as it worked in every scenario, you can trick the browser to think there's nothing to autocomplete by removing any trace of the original name attribute:

// typescript
untraceableFieldName: string;
fixChromeAutocomplete(): void {
    this.untraceableFieldName = 'locatorId' + new Date().getTime().toString();
}

<!-- removed everything but the changes for the sake of simplicity -->
<mat-form-field ...>
  <input
    ...
    [name]="untraceableFieldName"
    (keydown)="fixChromeAutocomplete()"
    (change)="fixChromeAutocomplete()"
  /> 
</mat-form-field>

The last solution has of course the issue that now you'll not be able to use the name attribute for any of your logic anymore, this solution is not elegant, but it sure works.

You can read a lot more about the issue at this other question.

Specially for Google Chrome:

Sept/2021: Lately their bug report has been more active for related bugs as it seems that it is a regression issue. Is actually one of the most ranked bug to solve at Chrome bugs tracker. You can see that issues related to Chrome ignoring the autocomplete="off" still open here. So, currently the second solution seems to be the only way to solve it.