mat-form-field must contain a MatFormFieldControl

Question

I want to build a form-field-Components. I am trying to wrap the 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>

The approximate result:

    <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>

I am getting this error:  "mat-form-field must contain a MatFormFieldControl" in the console. How can I fix this?

Answer 1

To solve this, you have to Import MatInputModule in your module.ts file. 

import { MatInputModule } from '@angular/material/input';

The bad news is that content projection into mat-form-field is not supported yet. The one single thing you can do is to place your content directly into the mat-form-field component or implement a MatFormFieldControl class. This will create a custom form field.

Answer 2

You Probably forgot to add MatInputModule to you ngModule

Solution add

import {MatInputModule} from '@angular/material/input';
to your ngModule Imports.