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

**Code:** `mat-form-field must contain a MatFormFieldControl` · **Category:** Angular · **Seen on:** Angular, TypeScript

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

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

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/angular/mat-form-field-must-contain-control)