Allow mat-error in mat-form-field subviews
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
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-errors 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 and aparently this is by design.
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?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction and inspect how mat-form-field discovers mat-error instances across a nested reusable component. Confirm the current direct-child limitation, then verify that validation errors render when mat-error is nested and that existing direct-child behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100