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:

Answer 1

You could try following this guide and implement/provide your own MatFormFieldControl

Answer 2

You might have missed to import MatInputModule

Answer 3

In my case I changed this:

<mat-form-field>
  <input type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

to this:

<mat-form-field>
  <input matInput type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

Adding the matInput directive to the input tag was what fixed this error for me.

Answer 4

MatRadioModule won't work inside MatFormField. The docs say

This error occurs when you have not added a form field control to your form field. If your form field contains a native or element, make sure you've added the matInput directive to it and have imported MatInputModule. Other components that can act as a form field control include < mat-select>, < mat-chip-list>, and any custom form field controls you've created.

Answer 5

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.

Answer 6

Problem 1: MatInputModule Not imported

import MatInputModule and MatFormFieldModule inside module i.e. app.module.ts

Angular 9+

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";

Below Angular 9

import { MatInputModule, MatFormFieldModule } from '@angular/material';

@NgModule({
  imports: [
     // .......
     MatInputModule,
     MatFormFieldModule 
     // .......
  ]
})
export class AppModule { }

Problem 2: Spellings Mistake

Be sure to add matInput and it is case-sensitive.

<input matInput type="text" />

Problem 3: Still compiler giving ERROR

if angular compiler still giving error after fixing above given problems then you must try with restarting the app.

ng serve