angular / angular/components

Allow mat-error in mat-form-field subviews

Đang mở
#15,778 0 bình luận 11 reaction 0 người được giao Xem trên GitHub
area: material/form-field 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ả

#### What is the expected behavior?
**NOTE**: it's more of an improvement (but a really critical one) than a bug.

`mat-error` should work even if it's not used as direct child of `mat-form-field`. It should work if it's used inside a component which itself is used in `mat-form-field`.

This is particularly necessary for **handling error messages in a reusable component**.
A real-world application may have several forms with a lot of validators on their fields.
Repeating a bunch of `mat-error`s and corresponding error messages for each usecase is just tedious.

### Suggested solution
I think the reason this currently doesn't work is because `@ContentChildren` decorator is used to get a hold of `mat-error` instances. However `@ContentChildren` [doesn't work for nested components](https://github.com/angular/angular/issues/5241) and aparently [this is by design](https://github.com/angular/angular/issues/5241#issuecomment-156841935).
Instead of using `@ContentChildren` , `MatError` can inject `MatFormField` and register itself into it.

#### What is the current behavior?
`mat-error` only works if it's directly used inside `mat-form-field`. If it's used inside a nested component, it doesn't work as expected.

#### What are the steps to reproduce?
https://stackblitz.com/angular/kllvoljyoem

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular/cdk@7.3.0
@angular/material@7.3.0
Angular: 7.2.3

#### Is there anything else we should know?

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

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

Hướng nghiên cứu

Bắt đầu với bản tái hiện StackBlitz được liên kết và kiểm tra cách mat-form-field phát hiện các thực thể mat-error qua một component có thể tái sử dụng được lồng nhau. Xác nhận giới hạn hiện tại chỉ áp dụng cho các phần tử con trực tiếp, sau đó kiểm tra rằng các lỗi xác thực được hiển thị khi mat-error được lồng nhau và hành vi hiện có đối với các phần tử con trực tiếp vẫn được giữ nguyên.

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
Tính năng
Độ khó
4/5
Thời gian dự kiến
3-5 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.