Angular: mat-form-field must contain a MatFormFieldControl

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

The Angular error "mat-form-field must contain a MatFormFieldControl" occurs for multiple reasons:

Forgetting to import MatInputModule.
Forgetting to add the matInput directive to input and textarea elements.
Setting *ngIf on an input or a textarea element.
Nesting invalid tags inside a mat-form-field element.
Having an empty mat-form-field element in your code.

Make sure to add the matInput directive to your input and textarea elements and import MatInputModule to resolve the error.

mat form field must contain matformfieldcontrol

Here is the complete stack trace.

shell

Copied!
ROR Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (form-field.mjs:430:12)
    at MatFormField._assertFormFieldControl (form-field.mjs:705:19)
    at MatFormField.ngAfterContentInit (form-field.mjs:606:14)
    at callHook (core.mjs:2487:22)
    at callHooks (core.mjs:2456:17)
    at executeInitAndCheckHooks (core.mjs:2407:9)
    at refreshView (core.mjs:10407:21)
    at refreshComponent (core.mjs:11427:13)
    at refreshChildComponents (core.mjs:10157:9)
    at refreshView (core.mjs:10416:13)

# Make sure to import `MatInputModule` into your module

Open your app.module.ts file and make sure to import MatInputModule and add it to your imports array.

app.module.ts

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

@NgModule({
    imports: [
        // ... your other imports
        MatFormFieldModule,
        // 👇️ add it to your imports array
        MatInputModule
    ]
})

export class AppModule { }

If you also use the mat-select element, make sure to import it as well.

app.module.ts

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

// 👇️ import the `MatSelectModule` module as well
import { MatSelectModule } from '@angular/material/select';

@NgModule({
    imports: [
        // ... your other imports
        MatFormFieldModule,
        // 👇️ add MatInputModule to your imports array
        MatInputModule,

        // 👇️ add MatSelectModule to your imports array
        MatSelectModule,
    ]
})

export class AppModule { }

import mat input module and add it to imports array

Try to restart your Angular server if the issue persists.

Press Ctrl + C to stop your dev server.
Rerun the npm start command.

# Add the `matInput` directive to your `input` and `textarea` elements

Make sure you've added the matInput directive to your input and textarea elements.

Here is a working example from my app.component.html file.

app.component.html

Copied!
<mat-form-field appearance="fill">
  <mat-label>Input</mat-label>
  <input matInput />
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>Textarea</mat-label>
  <textarea matInput></textarea>
</mat-form-field>

working input and textarea fields

If your form field contains native input or textarea elements, you have to set the matInput directive as shown in the code sample.

Make sure you haven't misspelled the directive as it is case-sensitive.

Check that you also haven't misspelled the names of any of the tags, e.g. <Input /> (incorrect) vs <input /> (correct).

If you work with select elements, you should set the matNativeControl directive instead, e.g. <select matNativeControl>.

Here is an example of using a mat-select tag.

app.component.html

Copied!
<mat-form-field appearance="fill">
  <mat-label>Select</mat-label>
  <mat-select>
    <mat-option value="one">First option</mat-option>
    <mat-option value="two">Second option</mat-option>
  </mat-select>
</mat-form-field>

using input textarea and mat select

# Make sure you haven't set `*ngIf` on an Input or Textarea element.

Make sure you haven't set *ngIf on an input or a textarea element if the error persists.

For example, the following code causes the issue.

app.component.html

Copied!
<!-- ⛔️ Incorrectly setting *ngIf -->
<mat-form-field appearance="fill">
  <mat-label>Input</mat-label>

  <input matInput *ngIf="condition" />
</mat-form-field>

Instead, set *ngIf on the mat-form-field element.

app.component.html

Copied!
<!-- ✅ Correctly setting *ngIf -->
  <mat-form-field *ngIf="this.magicNumber > 1" appearance="fill">
    <mat-label>Input</mat-label>
    <input matInput />
  </mat-form-field>

Try to restart your Angular server if the issue persists.

Press Ctrl + C to stop your dev server.
Rerun the npm start command.

You can also run the npx ng serve command to start your Angular server.

shell

Copied!
npx ng serve

# Make sure you aren't trying to use a `mat-checkbox` inside a `mat-form-field`

The error also occurs if you try to use a mat-checkbox inside a mat-form-field.

You can only use the following Angular Material components inside a mat-form-field:

<input matNativeControl>
<textarea matNativeControl>
<select matNativeControl>
<mat-select>
<mat-chip-list>

If you try to use any other Angular Material components inside mat-form-field, the error occurs.

You can try to remove the mat-form-field and see if the error is resolved.

# Make sure you haven't left `mat-form-field` as an empty tag

Leaving a mat-form-field tag as empty also causes the error.

app.component.html

Copied!
<!-- ⛔️ Error: mat-form-field must contain a MatFormFieldControl.
  -->
<mat-form-field appearance="fill">

</mat-form-field>

Either remove the tag or add child elements to it.

# Conclusion

To solve the Angular error "mat-form-field must contain a MatFormFieldControl", make sure:

You've imported MatInputModule and added it to your imports array.
You've set the matInput directive on input and textarea elements.
You haven't set *ngIf on an input or a textarea element.
You haven't nested invalid tags inside a mat-form-field element.
You don't have any empty mat-form-field elements in your code.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Angular: mat-form-field must contain a MatFormFieldControl