angular / angular/components

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

Đang mở
#29,410 2 bình luận 2 reaction 0 người được giao Xem trên GitHub
area: material/datepicker P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Mở bản tái hiện StackBlitz được liên kết và đọc tài liệu tích hợp date-range input forms trước. Theo dõi cách form-group validator ảnh hưởng đến trạng thái lỗi của trường date-range; hoàn tất khi một nhóm không hợp lệ đánh dấu trường là bị lỗi và hiển thị mat-error, trong khi các nhóm hợp lệ vẫn không thay đổi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.