Skip to content

bug(ErrorStateMatcher): Not able to configure globally ErrorStateMatcher #20097

Open
@basters

Description

@basters

Reproduction

StackBlitz link for reproduction: https://stackblitz.com/edit/components-issue-enshvf

Steps to reproduce:

  1. Pay your attention that CoreModule has declaration for ErrorStateMatcher provider with class ShowOnDirtyErrorStateMatcher. CoreModule imported into AppModule in the same way as FeatureModule.
  2. Try to focus/blur example "Favorite Food" input and note that ShowOnDirtyErrorStateMatcher was not applied.

In big enterprise applications we should have clean modular structure without any SharedModule or MaterialModule to be imported into each feature module.

MatInputModule has hardcoded ErrorStateMatcher provider and when we import that module into our feature modules – our global ErrorStateMatcher provider is overwritten.

I suppose this issue related with PR #18962, but I believe this issue describes another problem with ErrorStateMatcher

Expected Behavior

ErrorStateMatcher can be defined globally

Actual Behavior

ErrorStateMatcher overwrites with each MatInputModule import

Environment

  • Angular: 9+
  • CDK/Material: 9+

Activity

crisbeto

crisbeto commented on Jul 26, 2020

@crisbeto
Member

We should follow the same pattern as in the MatDateSelectionModel (SkipSelf + Optional) when providing the default ErrorStateMatcher so that any higher-level defaults are picked up.

added
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
and removed
needs triageThis issue needs to be triaged by the team
on Jul 26, 2020
basters

basters commented on Jul 26, 2020

@basters
Author

We should follow the same pattern as in the MatDateSelectionModel (SkipSelf + Optional) when providing the default ErrorStateMatcher so that any higher-level defaults are picked up.

Do you need my help with fixing this?

nicolae536

nicolae536 commented on Dec 10, 2020

@nicolae536

Yes this would be very helpfull cause right now you cannot override the default you can pass it using inputs but that creates a lot of boilerplate. A hacky fix would be

// This overrides the function globally
ErrorStateMatcher.prototype.isErrorState = (control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean => {
    return control && control.invalid && control.touched && control.dirty;
};
ngehlert

ngehlert commented on May 3, 2022

@ngehlert

is this still an issue? any updates? does it make sense to create a MR for this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/input

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @crisbeto@ngehlert@nicolae536@basters

        Issue actions

          bug(ErrorStateMatcher): Not able to configure globally ErrorStateMatcher · Issue #20097 · angular/components