question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<mat-error> not usable when instantiated inside <ng-template>

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
jelbourncommented, Oct 30, 2017

If that works then it should be fine

1reaction
jelbourncommented, Oct 29, 2017

This is the expected behavior of Angular. ng-template creates an inert template that can be grabbed and stamped out elsewhere. The content of the template does not “exist” in the view. Components like form-field need their content children to “exist” in order to see them.

Read more comments on GitHub >

github_iconTop Results From Across the Web

no render with mat-error, ng-template and *ngTemplateOutlet
Just like mentioned here in this answer: The <mat-error> elements need to be direct children of <mat-form-field> in order to work properly.
Read more >
NG0100: Expression has changed after it was checked - Angular
This error commonly occurs when you've added template expressions or have begun to implement lifecycle hooks like ngAfterViewInit or ngOnChanges . It is...
Read more >
Angular Forms and Validations
We created this angular forms tutorial to help you learn everything about Angular forms validations in angular apps. These angular forms ...
Read more >
48 answers on StackOverflow to the most popular Angular ...
I've got the following error when launching my Angular app, even if the component is not displayed. I have to comment out the...
Read more >
mat-error is not visible on a component that I created-angular.js
A mat-error only it's showed if the control is touched(*), so you need say that your control is touched when something happens. Dont...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found