Components: In mat-form-field mat-error is displayed wrong if added by ngFor

[ArntB]

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]

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 https://github.com/angular/material2/issues/6625 and the linked threads.

[ArntB]

Thanks.

[angular-automatic-lock-bot[bot]]

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._}