close

[Solved] ERROR Error: mat-form-field must contain a MatFormFieldControl in Angular

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error ERROR Error: mat-form-field must contain a MatFormFieldControl in Angular in angular. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve ERROR Error: mat-form-field must contain a MatFormFieldControl in Angular Error ?

  1. How To Solve ERROR Error: mat-form-field must contain a MatFormFieldControl in Angular Error?

    To Solve ERROR Error: mat-form-field must contain a MatFormFieldControl in Angular Error Make sure MatInputModule is imported and <mat-form-field> contains <input> with matInput / matSelect directives.

  2. ERROR Error: mat-form-field must contain a MatFormFieldControl in Angular

    To Solve ERROR Error: mat-form-field must contain a MatFormFieldControl in Angular Error Make sure MatInputModule is imported and <mat-form-field> contains <input> with matInput / matSelect directives.

Solution 1

Here You Need to import two modules and add those in the imports and exports section.

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

@NgModule ({
  imports: [ MatFormFieldModule, MatInputModule ],
  exports: [ MatFormFieldModule, MatInputModule ]
})

And the most thing which everybody misses this ‘/’ character. if you see the Angular Material Documentation, they also miss this (Last Checked 16 Jun 2020, don’t know they even updated or not). I make an example for clarifications

<!-- Wrong -->
<mat-form-field>
  <input matInput>
</mat-form-field>

<!-- Right -->
<mat-form-field>
  <input matInput />
</mat-form-field>

Look at the snippet carefully. when <input begin it must close with /> but most people miss the / (backslash) character.

Solution 2

Make sure MatInputModule is imported and <mat-form-field> contains <input> with matInput / matSelect directives.

Solution 3

Import MatInputModule, solved my error

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment