mat-form-field must contain a MatFormFieldControl

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.

Problem 1: MatInputModule Not imported

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

import { MatInputModule } from '@angular/material/input';import { MatFormFieldModule } from "@angular/material/form-field";@NgModule({    imports: [        MatFormFieldModule,        MatInputModule    ]})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

Import MatInputModule in your module.ts file and it will solve the problem.

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

The statement after it is the old answer.

Unfortunately content projection into mat-form-field is not supported yet.Please track the following github issue to get the latest news about it.

By now the only solution for you is either place your content directly into mat-form-field component or implement a MatFormFieldControl class thus creating a custom form field component.