mat-form-field must contain a MatFormFieldControl
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: matInput - spellings mistake / forget to add
Be sure to add matInput
and it is case-sensitive.
<mat-form-field>
<input matInput type="text" />
</mat-form-field>
Problem 3: Invalid *ngIf placement
Check that you don't have any condition on input
tag that is going to be false in any case because mat-form-field
looks for matInput
inside it. Instead put *ngIf
on mat-form-field
tag.
<mat-form-field>
<input matInput *ngIf="someCondition"> // don't add condition here, else add in mat-form-field tag
</mat-form-field>
credit to @William Herrmann for pointing out this problem#3
Problem 4: 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
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.