Angular 12 Material shows cannot read property errorstate undefined of MatFormField

Question

This is the simple HTML that I have written for single page web app

<div class="bg">
    <h1 class="faq_heading">Frequently Asked Questions</h1>
    <div class="search">
        <mat-form-field class="search_input">
            <input type="text" placeholder="Search" class="search_input" matInput [(ngModel)]="inp" (keyup)="onKey($event)" />
        </mat-form-field>
        <mat-form-field>
            <mat-label>Categories</mat-label>
            <mat-select class="dropdown" placeholder="Categories">
                <mat-option value="Default">Default</mat-option>
            </mat-select>
        </mat-form-field>
        <img src="../assets/images/search.svg" alt="" class="search_img" />
    </div>
</div>

There is nothing much in the component.ts file just the basic template and required import statements

Following is the app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { MatFormFieldModule } from "@angular/material/form-field";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { MatGridListModule } from "@angular/material/grid-list";
import { MatSelectModule } from "@angular/material/select";
import { MatPaginatorModule } from "@angular/material/paginator";
import { MatDialogModule } from "@angular/material/dialog";
import { MatSnackBarModule } from "@angular/material/snack-bar";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { HttpClientModule } from "@angular/common/http";
import { faqservice } from "./faq.service";
import { MatExpansionModule } from "@angular/material/expansion";
import { FormsModule } from "@angular/forms";

@NgModule({
    declarations: [AppComponent],
    imports: [
        FormsModule,
        MatExpansionModule,
        HttpClientModule,
        BrowserModule,
        AppRoutingModule,
        MatFormFieldModule,
        MatGridListModule,
        MatSelectModule,
        MatDialogModule,
        BrowserAnimationsModule,
        MatSnackBarModule,
        MatPaginatorModule,
    ],
    providers: [faqservice],
    bootstrap: [AppComponent],
})
export class AppModule {}
  

Following are the errors Error1:

ERROR TypeError: Cannot read property 'controlType' of undefined
    at MatFormField.ngAfterContentInit (form-field.js:527)
    at callHook (core.js:2526)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9486)
    at refreshComponent (core.js:10616)
    at refreshChildComponents (core.js:9242)
    at refreshView (core.js:9495)
    at renderComponentOrTemplate (core.js:9559)
    at tickRootContext (core.js:10790)

Error2:

ERROR TypeError: Cannot read property 'errorState' of undefined
    at MatFormField_HostBindings (form-field.js:830)
    at processHostBindingOpCodes (core.js:9213)
    at refreshView (core.js:9491)
    at refreshComponent (core.js:10616)
    at refreshChildComponents (core.js:9242)
    at refreshView (core.js:9495)
    at renderComponentOrTemplate (core.js:9559)
    at tickRootContext (core.js:10790)
    at detectChangesInRootView (core.js:10815)
    at RootViewRef.detectChanges (core.js:22865)

As you can see there is not much in the code as I have just started the development , but I am already getting errors in basic templates direct from the docs. How to handle these errors? (please note that I am new to angular material, if possible just mention some details around the answer)

Here is the package.json

{
  "name": "faq1",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.1.1",
    "@angular/cdk": "^12.1.1",
    "@angular/common": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/material": "^12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular/cli": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.3.2"
  }
}

Answer 1

I had the same problem, but I solved it adding an ngIf in the mat-form-field tag.

<mat-form-field appearance="fill" *ngIf="role$ | async as roles">
<mat-label>Select a role</mat-label>
    <mat-select formControlName="codeRole">
        <mat-option *ngFor="let r of roles" [value]="r.code>
           {{r.description}}</mat-option>
    </mat-select>
</mat-form-field>

Answer 2

Import and declare the MatInputModule in the module file solve the issue

....
import {MatInputModule} from '@angular/material/input';


@NgModule({
    ...
    ,
    imports: [
        ...
        MatInputModule,
    ],
    providers: [
        ....
    ]
})
export class MyModule {}