title: Angular 12 Material shows cannot read property errorstate undefined of MatFormField
body: <p>This is the simple HTML that I have written for single page web app</p>
  <pre><code>&lt;div class=&quot;bg&quot;&gt;
      &lt;h1 class=&quot;faq_heading&quot;&gt;Frequently Asked Questions&lt;/h1&gt;
      &lt;div class=&quot;search&quot;&gt;
          &lt;mat-form-field class=&quot;search_input&quot;&gt;
              &lt;input type=&quot;text&quot; placeholder=&quot;Search&quot; class=&quot;search_input&quot; matInput [(ngModel)]=&quot;inp&quot; (keyup)=&quot;onKey($event)&quot; /&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
              &lt;mat-label&gt;Categories&lt;/mat-label&gt;
              &lt;mat-select class=&quot;dropdown&quot; placeholder=&quot;Categories&quot;&gt;
                  &lt;mat-option value=&quot;Default&quot;&gt;Default&lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
          &lt;img src=&quot;../assets/images/search.svg&quot; alt=&quot;&quot; class=&quot;search_img&quot; /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>There is nothing much in the component.ts file just the basic template and required import statements</p>
  <p>Following is the app.module.ts</p>
  <pre><code>import { NgModule } from &quot;@angular/core&quot;;
  import { BrowserModule } from &quot;@angular/platform-browser&quot;;
  import { MatFormFieldModule } from &quot;@angular/material/form-field&quot;;
  import { AppRoutingModule } from &quot;./app-routing.module&quot;;
  import { AppComponent } from &quot;./app.component&quot;;
  import { MatGridListModule } from &quot;@angular/material/grid-list&quot;;
  import { MatSelectModule } from &quot;@angular/material/select&quot;;
  import { MatPaginatorModule } from &quot;@angular/material/paginator&quot;;
  import { MatDialogModule } from &quot;@angular/material/dialog&quot;;
  import { MatSnackBarModule } from &quot;@angular/material/snack-bar&quot;;
  import { BrowserAnimationsModule } from &quot;@angular/platform-browser/animations&quot;;
  import { HttpClientModule } from &quot;@angular/common/http&quot;;
  import { faqservice } from &quot;./faq.service&quot;;
  import { MatExpansionModule } from &quot;@angular/material/expansion&quot;;
  import { FormsModule } from &quot;@angular/forms&quot;;
  
  @NgModule({
      declarations: [AppComponent],
      imports: [
          FormsModule,
          MatExpansionModule,
          HttpClientModule,
          BrowserModule,
          AppRoutingModule,
          MatFormFieldModule,
          MatGridListModule,
          MatSelectModule,
          MatDialogModule,
          BrowserAnimationsModule,
          MatSnackBarModule,
          MatPaginatorModule,
      ],
      providers: [faqservice],
      bootstrap: [AppComponent],
  })
  export class AppModule {}
    
  </code></pre>
  <p>Following are the errors
  Error1:</p>
  <pre><code>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)
  </code></pre>
  <p>Error2:</p>
  <pre><code>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)
  </code></pre>
  <p>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)</p>
  <p>Here is the package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;faq1&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build&quot;,
      &quot;watch&quot;: &quot;ng build --watch --configuration development&quot;,
      &quot;test&quot;: &quot;ng test&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/cdk&quot;: &quot;^12.1.1&quot;,
      &quot;@angular/common&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/compiler&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/core&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/forms&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/material&quot;: &quot;^12.1.1&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/router&quot;: &quot;~12.1.1&quot;,
      &quot;rxjs&quot;: &quot;~6.6.0&quot;,
      &quot;tslib&quot;: &quot;^2.2.0&quot;,
      &quot;zone.js&quot;: &quot;~0.11.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/cli&quot;: &quot;~12.1.1&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~12.1.1&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.6.0&quot;,
      &quot;@types/node&quot;: &quot;^12.11.1&quot;,
      &quot;jasmine-core&quot;: &quot;~3.7.0&quot;,
      &quot;karma&quot;: &quot;~6.3.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
      &quot;karma-coverage&quot;: &quot;~2.0.3&quot;,
      &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.0&quot;,
      &quot;typescript&quot;: &quot;~4.3.2&quot;
    }
  }
  
  </code></pre>