CODEWITHSUNDEEP
angularangular-material
sl3dg3
sl3dg3

Reputation: 5190

Globally turn off autocomplete on material's matInput

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.

Upvotes: 2

Views: 3025

Answers (2)

nirKa
nirKa

Reputation: 213

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.

Upvotes: 4

Christian Vincenzo Traina
Christian Vincenzo Traina

Reputation: 10464

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

Upvotes: 0

Related Questions