mat-form-field must contain a MatFormFieldControl

Question

We are trying to build our own form-field-Components at our Company. We are trying to wrap material design's Components like this:

field:

<mat-form-field>     <ng-content></ng-content>     <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>     <mat-hint align="end">{{message.value.length}} / 256</mat-hint>     <mat-error>This field is required</mat-error> </mat-form-field> 

textbox:

<field hint="hint">     <input matInput      [placeholder]="placeholder"      [value]="value"     (change)="onChange($event)"      (keydown)="onKeydown($event)"      (keyup)="onKeyup($event)"      (keypress)="onKeypress($event)"> </field> 

Usage:

<textbox value="test" hint="my hint"></textbox> 

This results in approximately this:

    <textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">        <field>           <mat-form-field class="mat-input-container mat-form-field>              <div class="mat-input-wrapper mat-form-field-wrapper">                 <div class="mat-input-flex mat-form-field-flex">                    <div class="mat-input-infix mat-form-field-infix">                       <input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">                       <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>                    </div>                 </div>                 <div class="mat-input-underline mat-form-field-underline">                    <span class="mat-input-ripple mat-form-field-ripple"></span>                 </div>                 <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>              </div>           </mat-form-field>        </field>     </textbox> 

But I'm getting "mat-form-field must contain a MatFormFieldControl" in the console. I guess this has to do with mat-form-field not directly containing a matInput-field. But it is containing it, it's just withing the ng-content projection.

Here is a blitz: https://stackblitz.com/edit/angular-xpvwzf

Answer 1

I had this issue. I imported MatFormFieldModule at my main module, but forgot to add MatInputModule to the imports array, like so:

import { MatFormFieldModule, MatInputModule } from '@angular/material';  @NgModule({     imports: [         MatFormFieldModule,         MatInputModule     ] }) export class AppModule { } 

More info here.