<mat-form-field>
                <input matInput 
                    type="text" 
                    id="confirmationKey" 
                    placeholder="code de confirmation"
                    formControlName="confirmationKey"
                >
                <mat-hint>Saisissez la clé de confirmation reçue par                  e-mail.</mat-hint>
                  @if(formErrorHandler.getErrorMsg(confirmationKeyControl?.errors); as errorMsg ){
                   <mat-error>{{errorMsg}}</mat-error>
                }
</mat-form-field>

 <mat-form-field>
                <input matInput 
                    type="text" 
                    id="confirmationKey" 
                    placeholder="code de confirmation"
                    formControlName="confirmationKey"
                >
                <mat-hint>Saisissez la clé de confirmation reçue par                  e-mail.</mat-hint>
                  @if(formErrorHandler.getErrorMsg(confirmationKeyControl?.errors); as errorMsg ){
                   <mat-error>{{errorMsg}}</mat-error>
                }
</mat-form-field>

Warning message :

Node matches the "mat-error, [matError]" slot of the "MatFormField" component, but will not be projected into the specific slot because the surrounding @if has more than one node at its root. To project the node in the right slot, you can:

1. Wrap the content of the @if block in an that matches the "mat-error, [matError]" selector.
2. Split the content of the @if block across multiple @if blocks such that each one only has a single projectable node at its root.
3. Remove all content from the @if block, except for the node being projected.

This check can be disabled using the extendedDiagnostics.checks.controlFlowPreventingContentProjection = "suppress" compiler option.ngtsc(-998011)

Steps I Tried:

I wrapped the content of the @if block in an to match the mat-error slot, but the warning persists. I split the logic into separate @if blocks, ensuring that each block has only one projectable node, but I still see the warning.

I don't wanna disabled extendedDiagnostics.checks.controlFlowPreventingContentProjection = "suppress".

What am I missing in handling @if with content projection? How can I correctly structure this to eliminate the warning?

• angular
• angular-material

• Were you able to resolve this issue? – RuslanZab Commented Jan 17 at 4:50

2 Answers 2

The ** You have at the beginning and the end is messing up the angular compiler. Could be a bug also, you can verify by creating an issue on angular github.

Before:

  @if(errorMessage(); as errorMsg ){ 
    **<mat-error>{{errorMsg}}</mat-error>** 
  }

After:

  @if(errorMessage(); as errorMsg ){ 
    <mat-error>{{errorMsg}}</mat-error>
  }

Stackblitz Demo

I solved the alert problem by moving the test, like this :

<mat-error>
  @if (cityControl?.errors; as errors) {
      @if(formErrorHandler.getErrorMsg(errors); as errorMsg ) {
           <span>{{errorMsg}}</span>
       }
  }
</mat-error>