Closed
Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
It should be possible to use an ng-template
with mat-error
inside it to create a reusable error display template.
What is the current behavior?
When mat-error
is included as part of an ng-template
it is not rendered correctly.
What are the steps to reproduce?
StackBlitz starter (using latest npm
release): https://stackblitz.com/edit/angular-jpmbve
<ng-template #errTempl let-ctl>
<mat-error *ngIf="ctl.hasError('pattern')">test2</mat-error>
</ng-template>
<form novalidate [formGroup]="theForm">
<mat-form-field>
<mat-select placeholder="Platform (bugged)" formControlName="platform">
<mat-option value="WST">WST</mat-option>
<mat-option value="FTD">FTD</mat-option>
</mat-select>
<ng-template [ngTemplateOutlet]="errTempl"
[ngOutletContext]="{ $implicit: theForm.controls['platform'] }"></ng-template>
</mat-form-field>
</form>
Note how the mat-error
element is instantiated inside the ng-template
- doing it this way causes the mat-error
text to be displayed incorrectly.
What is the use-case or motivation for changing an existing behavior?
The use case is having a reusable error display template that can be attached to different fields with the same error logic.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 4.4.6
Angular animations: 4.4.6
Typescript: 2.5.3
Browser: Chrome 62.0.3202.75 (Official Build) (64-bit)
Is there anything else we should know?
Metadata
Metadata
Assignees
Labels
No labels