Skip to content

bug(mat-date-range-input): formGroup error doesn't switch form field error state #29410

Open

Description

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hello,

https://material.angular.io/components/datepicker/overview#date-range-input-forms-integration
The mat date range input documentation states:

Date range input forms integration

The mat-date-range-input component can be used together with the FormGroup directive from @angular/forms to group the start and end values together and to validate them as a group.

So I'm expecting the form group, grouping start and end date, to update the "global range input" state, but this is not the case.

My use case is to add a customValidator (to limit the number of days between start and end dates) on the formGroup. When the form is in error, I was expecting the form field to be red and to display mat-error, but nothing shows when the form is invalid.

  • Is it a bug?
  • Is it the normal behavior, and a documentation ambiguity? It would be a nice new feature in this case.

I've found a workaround using ErrorStateMatcher. But it feels like it's supposed to be included in mat date range picker as both inputs are inside, within the formGroup
https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown

Reproduction

Have mat date range picker with a form group validator => only start and end controls are updating displayed form field validity

Reproduction link: https://stackblitz.com/edit/stackblitz-starters-xhx4k1?file=src%2Fmain.ts

Expected Behavior

When formGroup is in error, form field state should be in error and display mat-error

Actual Behavior

When formGroup is in error, form field state is valid and no mat-error is displayed

Environment

  • Angular: 18
  • CDK/Material: 18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

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

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions