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?

[blockerdude]

The solution is as @vmuresanu noted above.
In each lazy loaded module you must provide the error state matcher

providers: [ { provide: ErrorStateMatcher, useClass: CustomErrorStateMatcher }, ]

[liesahead]

This issue needs some attention because validation is the thing that is used in most of the apps.

[liesahead]

Still relevant, up

[m4riok]

The solution is as @vmuresanu noted above. In each lazy loaded module you must provide the error state matcher

providers: [ { provide: ErrorStateMatcher, useClass: CustomErrorStateMatcher }, ]

Also works if provided in any module imported by all your lazy loaded modules. But still this need to be addressed especially since the best solution to #4190 is to use a different ErrorStateMatcher than the one provided.

[njsent]

This issue also applies to standalone components. I have to import my custom ErrorStateMatcher (submitted = true) on each parent component.

[AndyAlex]

I can also confirm that there's an issue with standalone components, which is a big thing, since this is the way the Angular team is going. I had to provide ShowOnDirtyErrorStateMatcher in my standalone component's providers because it wasn't working when provided only (globally) in my appConfig.