mat-form-field must contain a MatFormFieldControl Angular Origin: On your device Last updated 15 Oct 2026

Angular Material: Error: mat-form-field must contain a MatFormFieldControl

A <mat-form-field> has no Material input inside, or the module that provides matInput/mat-select is not imported.

Exact message you may see mat-form-field must contain a MatFormFieldControlError: mat-form-field must contain a MatFormFieldControl.mat-form-field must contain a MatFormFieldControl.
Explore the map of this error Full error map →
Seen on: Angular TypeScript

Meaning

mat-form-field needs a control registered with it: matInput, mat-select, mat-chip-grid, etc. A plain <input> without matInput, a missing MatInputModule / MatSelectModule, or a control hidden by @if at render time all cause it.

Common causes

  • MatInputModule / MatSelectModule / MatChipsModule not imported
  • <input> lacks the matInput attribute
  • The control is rendered conditionally or inside a child component
  • Using mat-select without importing MatSelectModule
  • Version mismatch between @angular/material and @angular/cdk

⚡ Quick fix

  1. Import the Material module for the control
  2. Add matInput to the input
  3. Keep the control directly inside the mat-form-field

Detailed fix by platform

Angular

  1. Standalone: imports: [MatFormFieldModule, MatInputModule]
  2. Install matching versions: ng add @angular/material

Code examples

Control inside the form field

html
<mat-form-field appearance="outline">
  <mat-label>Email</mat-label>
  <input matInput formControlName="email" type="email">   <!-- matInput is required -->
  <mat-error>Enter a valid email</mat-error>
</mat-form-field>

How to diagnose

  1. Control — Is matInput / mat-select inside?
  2. Module — Is its module imported?
  3. Versions — Material and CDK match the core version?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

Cannot find control with name — Angular: Error: Cannot find control with name: 'email' (reactive forms) (Angular)Cannot find control w…NG01050 — Angular: NG01050: formControlName must be used with a parent formGroup directive (Angular)NG01050NG01203 — Angular: NG01203: No value accessor for form control with name: 'x' (ControlValueAccessor missing) (Angular)NG01203NG01352 — Angular: NG01352: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' (Angular)NG01352NG8001 — Angular: NG8001: 'app-item' is not a known element — verify that it is included in the component's imports (Angular)NG8001NG8002 — Angular: NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input' (Angular)NG8002NG8003 — Angular: NG8003: No directive found with exportAs 'ngForm' (template reference variable) (Angular)NG8003mat-form-…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.