Globally turn off autocomplete on material's matInput

Question

Is there any way for globally turning off the autocomplete behaviour on material's MatInput fields? I would like to get rid of this boiler plate code repeating all over the place:

<input matInput formControlName="myCtrl" autocomplete="off" />

E.g. in a similar way like globally defining the appearance and label options of the form fields with injection tokens in the app module's provider array:

// Default appearance of material form fields
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } },
// Globally disable label of material form fields
{ provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: { float: 'never' } }

I scanned through doc and source code and could not find anything.

I don't think there is such option. There's a `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token, but no option to disable it. You can try with a global script — Christian Vincenzo Traina, Dec 12 '19 at 08:42
This was my apprehension. Do you have any source for such a global script hack? — sl3dg3, Dec 12 '19 at 08:55
Can we use `autocomplete="off"` to the `form` tag instead of adding it to all input elements ? — Rohan Kumar, Dec 12 '19 at 09:04

score 3 · Answer 1 · answered Oct 26 '20 at 14:19

A little bit late, but maybe will be helpful.

You can just add this simple 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'
  }

}

If you choose to override the autocomplete attribute it will take the text from the element.

remember to add this directive to app.module.ts or some other module to enable it — Iceberg, Feb 28 '22 at 09:56

score 0 · Answer 2 · answered Dec 12 '19 at 09:38

0

As I said in a comment, if there is not a better solution, you can add a global script that sets autocomplete="off" to all of your matInput elements.

For example, you can add this snippet in your polyfills.ts file:

document.addEventListener('DOMContentLoaded', () => {

  Array.from(document.querySelectorAll('input[matInput]'))
    .forEach(element => {
      element.setAttribute('autocomplete', 'off');
    });

});

Note: consider converting arrow functions to plain functions in order to support also IE11

answered Dec 12 '19 at 09:38

Christian Vincenzo Traina

9,546
2
40
63

The listener won't get fired when the DOM changes. I gave a try with `MutationObserver`, but it will really kill any performance as it gets almost endlessly fired when I do watch body for changes... so, I think it is not worth the hassle. – sl3dg3 Dec 12 '19 at 15:41
@sl3dg3 you are right, this doesn't consider the `*ngIf` stuff – Christian Vincenzo Traina Dec 12 '19 at 16:31

Globally turn off autocomplete on material's matInput

2 Answers2

Linked