bug(mat-form-field): Nesting ngIfs or @if inside mat-form-field causes mat-error to be displayed weirdly

[lemonsnaw]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

If you have mat-error deep nested in @if or ngifs , it is not displayed correctly .

<-- doesn't work -->
<mat-form-field class="example-full-width">
  <mat-label>Email</mat-label>
  <input
    type="email"
    matInput
    [formControl]="emailFormControl"
    placeholder="Ex. pat@example.com"
  />
  @let somecondition=true;
  @if(somecondition)
  {
    @if (emailFormControl.hasError('required')) {
      <mat-error>Email is <strong>required</strong></mat-error>
    }
  }
  
</mat-form-field>

refer to 2nd formcontrol.
Only different between them is one second one 2 level nested with @if condition while first one is only 1 level nested.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-3oipce8i?file=src%2Fmain.ts
Steps to reproduce:

1. Simply just click on any input and click outside

Expected Behavior

mat-error should displayed correctly even if it's nested inside multiple @if s.

Actual Behavior

mat-error inside multiple @if is not being displayed correctly.

Environment

• Angular: 19.0.7
• CDK/Material: 19.0.7
• Browser(s): Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

This is a framework issue. See angular/angular#54035.

[angular-automatic-lock-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.}