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

[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.