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>

Boneyard

Have you tried autocomplete="new-password"? As it seems working just fine. I'll write an explanation if it worked for you. – Rudd

@Mohamed.Karkotly It works some times and doesn't some times. – Boneyard

autocomplete="off" seems to be working for me, another option would be to check if you actually have imported MatAutocompleteModule via import {MatAutocompleteModule} from '@angular/material/autocomplete'; into your angular project and listed it in your @NgModule - and finally to look into your browser settings under autofill/autocomplete and turn it off. Can you provide the code where you've imported it? – Tea

Auto-complete is not specific to Angular. This question is likely a duplicate of #3030 – Imbibition

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'
    }

}

Subtraction

Answer 2

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

<form autocomplete="off">

Fibrosis

totally doesn't work for me today. I think they changed this. – Meg

Answer 3

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.

Staford

Answer 4

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"/>

Manno

Googling seems to indicate that using a random string (eg "nope") will no longer work on modern browsers like Chrome. – Imponderable

Answer 5

You just need to add an id="" to your input

 <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" autocomplete="off">
    <mat-form-field appearance="outline">
      <mat-label>Password</mat-label>
      <input type="password" matInput formControlName="pwd"  id="new-pwd1">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Confirme password</mat-label>
      <input type="password" matInput formControlName="pwd2" id="new-pwd2">
    </mat-form-field>

    <button [disabled]="formGroup.invalid">Send</button>
  </form>

Mithridatism

Answer 6

Try this:

@ViewChild('myInput') myInput: ElementRef; 
    
ngOnInit() { 
this.myInput.nativeElement.setAtribute('autocomplete', 'off')

}

Marabou

Answer 7

I had similar issue with angular Application i have used this autocomplete="new-password" and it's a workingenter image description here

Freewheeling