Skip to content

In mat-form-field mat-error is displayed wrong if added by ngFor #7739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ArntB opened this issue Oct 12, 2017 · 3 comments
Closed

In mat-form-field mat-error is displayed wrong if added by ngFor #7739

ArntB opened this issue Oct 12, 2017 · 3 comments

Comments

@ArntB
Copy link

ArntB commented Oct 12, 2017

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Dynamically added mat-error should be rendered the same as statically entered mat-errror.

What is the current behavior?

Now the error message is displayed above the red under line.

What are the steps to reproduce?

to reproduce see: https://material2-select-width-issues-1pb9sd.stackblitz.io
editor url: https://stackblitz.com/edit/material2-select-width-issues-1pb9sd

What is the use-case or motivation for changing an existing behavior?

I am trying to build some reusable components for my apps.

In order to standardize the error handling code
I want to be able to write the error messages from an array of error messages.

It will help me make my code DRY.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 4.4.4.
Material 2: 2.0.0-beta.12

@willshowell
Copy link
Contributor

There are a couple other discussions around here about this, but basically, due to the way content projection works inside Angular core, mat-error won't be projected inside mat-form-field unless it is the top level element.

https://github.com/angular/material2/blob/70c349c23f0d886d167968b33c1defe84510c877/src/lib/form-field/form-field.html#L47

To get around this, you can alias your ng-template to project as if it were mat-error using ngProjectAs. (example)

<ng-template ngFor let-error [ngForOf]="errorTest" ngProjectAs="mat-error">

There is more info in #6625 and the linked threads.

@ArntB
Copy link
Author

ArntB commented Oct 12, 2017

Thanks.

@ArntB ArntB closed this as completed Oct 12, 2017
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants