components: Cannot set custom global ErrorStateMatcher for lazy loaded modules

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

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 13
Comments: 15

Most upvoted comments

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.

+10

adnanmamajiwala on Nov 24, 2018

Still an issue in Angular 9 / Material 9.

The empty constructor @adnanmamajiwala mentioned does not work either.

fortex on May 25, 2020

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.

m4riok on Dec 3, 2022

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.

vmuresanu on Sep 21, 2020