angular / angular/components

Allow mat-error in mat-form-field subviews

Open
#15,778 0 comments 11 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: material/form-field P3
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.