Angular throws missing MatFormFieldControl error in mat-form-field when it's referenced by a template. Direct insert works fine

Question

So this is the working code:

<mat-form-field *ngIf="asFormFieldWithLabel; else selector" style="width: 100%;">
  <mat-label>{{asFormFieldWithLabel}}</mat-label>
  <mat-select
  ...bindings and event crap...
>
    <mat-option *ngFor="let folder of folderList" [value]="folder">
      {{ folder.id.folderName }}
    </mat-option>
  </mat-select>
</mat-form-field>

<ng-template #selector>
  <mat-select
  ...SAME bindings and event crap...
>
    <mat-option *ngFor="let folder of folderList" [value]="folder">
      {{ folder.id.folderName }}
    </mat-option>
  </mat-select>
</ng-template>

As I try to avoid duplicated code, I thought this should do it as well:

<mat-form-field *ngIf="asFormFieldWithLabel; else selector" style="width: 100%;">
  <mat-label>{{asFormFieldWithLabel}}</mat-label>
  <ng-container *ngTemplateOutlet="selector"></ng-container>
</mat-form-field>

<ng-template #selector>
  <mat-select
  ...bindings and event crap...
>
    <mat-option *ngFor="let folder of folderList" [value]="folder">
      {{ folder.id.folderName }}
    </mat-option>
  </mat-select>
</ng-template>

Error is the infamous

Error: mat-form-field must contain a MatFormFieldControl

in the 2nd case.

Why though? Do I really need to repeat all the mat-select stuff?

Answer 1

It looks like this template is not needed, we can achieve the same with just an ngIf on the label I hope this helps

html

<mat-form-field style="width: 100%">
  <mat-label *ngIf="asFormFieldWithLabel">{{asFormFieldWithLabel}}</mat-label>
  <mat-select>
    <mat-option *ngFor="let folder of folderList" [value]="folder">
      {{ folder }}
    </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field style="width: 100%">
  <mat-label *ngIf="asFormFieldWithoutLabel"
    >{{asFormFieldWithLabel}}</mat-label
  >
  <mat-select>
    <mat-option *ngFor="let folder of folderList" [value]="folder">
      {{ folder }}
    </mat-option>
  </mat-select>
</mat-form-field>

ts

import { Component } from '@angular/core';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CommonModule } from '@angular/common';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css'],
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, MatSelectModule, CommonModule],
})
export class FormFieldOverviewExample {
  asFormFieldWithLabel = 'qwerty';
  asFormFieldWithoutLabel = null;
  folderList = [1, 2, 3];
}

stackblitz demo