Components: Cannot set custom global ErrorStateMatcher for lazy loaded modules

[andrei-ilyukovich]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

There should be ability to override ErrorStateMatcher for the whole application

What is the current behavior?

@NgModule({ providers: [ {provide: ErrorStateMatcher, useClass: CustomErrorStateMatcher} ] })

CustomErrorStateMatcher being provided in the application root module aren't applied inside of lazy loaded modules. Thus it is necessary to duplicate providing of custom error state matcher in every lazy loaded module.

What is the use-case or motivation for changing an existing behavior?

It is reasonable to have ability to override error state matcher bahavior for the whole app no matter it consists of lazy or non-lazy modules

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.1.3
Material 5.2.2

[shashikiran797]

@andrei-ilyukovich

Try this

@NgModule({ providers: [ {provide: ErrorStateMatcher, useValue: new CustomErrorStateMatcher()} ] })

[maxime1992]

@shashikiran797 this is not working and I don't see why it would

[phsims]

I have the same issue, did you get this fixed?

[tejas6jan]

Even I have the same issue, please let me know if anyone gets it fixed.

[adnanmamajiwala]

I was facing the same issue, however after adding an empty constructor to the CustomErrorStateMatcher, it started working for me.

import {ErrorStateMatcher} from '@angular/material';
import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';

export class CustomErrorStateMatcher implements ErrorStateMatcher {

  constructor() {
  }

  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }

}

--

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    {provide: ErrorStateMatcher, useClass: CustomErrorStateMatcher}
  ],
  bootstrap: [...]
})
export class AppModule {
}

Hope this helps.

[fortex]

Still an issue in Angular 9 / Material 9.

The empty constructor @adnanmamajiwala mentioned does not work either.

[vmuresanu]

Issue still persists in Angular 10.1
Same for me, nothing from above proposed solutions work.

As a workaround I need to copy { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }, (or a custom error state matcher) in each and every lazy loaded module. Which basically in my case is not a big deal as I don't have so many lazy loaded modules, but still it is a workaround, and would be great to have an official solution taking into consideration that this comes since Angular 5.

[fwiesweg]

Angular Material 10.2.5 (with angular 10.1.6) exhibits similar behaviour, and we do have quite a few lazy-loaded modules and I will for sure forget the workaround for one of them sooner or later ;) So yes, this would be really lovely.

[essana3]

Angular Material 10.2.5, same issue, I have 2 lazy loaded modules: Core and Backoffice. The ShowOnDirtyErrorStateMatcher works fine in the Backoffice but not in Core which is very weird.

[gleisonkz]

I have the same issue, here using Angular 11 anyone have any solution?