chore: change ErrorStateMatcher to use FormControl again (#7555)

Author: kara

src/demo-app/input/input-demo.ts

@@ -1,5 +1,5 @@
 import {Component, ChangeDetectionStrategy} from '@angular/core';
-import {FormControl, NgControl, Validators} from '@angular/forms';
+import {FormControl, Validators} from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material';
 
 
@@ -54,7 +54,7 @@ export class InputDemo {
   }
 
   customErrorStateMatcher: ErrorStateMatcher = {
-    isErrorState: (control: NgControl | null) => {
+    isErrorState: (control: FormControl | null) => {
       if (control) {
         const hasInteraction = control.dirty || control.touched;
         const isInvalid = control.invalid;

src/lib/core/error/error-options.ts

@@ -7,20 +7,20 @@
  */
 
 import {Injectable} from '@angular/core';
-import {FormGroupDirective, NgForm, NgControl} from '@angular/forms';
+import {FormGroupDirective, NgForm, FormControl} from '@angular/forms';
 
 /** Error state matcher that matches when a control is invalid and dirty. */
 @Injectable()
 export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     return !!(control && control.invalid && (control.dirty || (form && form.submitted)));
   }
 }
 
 /** Provider that defines how form controls behave with regards to displaying error messages. */
 @Injectable()
 export class ErrorStateMatcher {
-  isErrorState(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     return !!(control && control.invalid && (control.touched || (form && form.submitted)));
   }
 }

src/lib/input/input.md

@@ -127,7 +127,7 @@ returns a boolean. A result of `true` will display the error messages.
 
 ```ts
 class MyErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     // Error when invalid control is dirty, touched, or submitted
     const isSubmitted = form && form.submitted;
     return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted)));

src/lib/input/input.ts

@@ -18,7 +18,7 @@ import {
   Self,
 } from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
+import {FormGroupDirective, NgControl, NgForm, FormControl} from '@angular/forms';
 import {Platform, getSupportedInputTypes} from '@angular/cdk/platform';
 import {getMatInputUnsupportedTypeError} from './input-errors';
 import {ErrorStateMatcher} from '@angular/material/core';
@@ -225,7 +225,8 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
     const oldState = this.errorState;
     const parent = this._parentFormGroup || this._parentForm;
     const matcher = this.errorStateMatcher || this._defaultErrorStateMatcher;
-    const newState = matcher.isErrorState(this.ngControl, parent);
+    const control = this.ngControl ? this.ngControl.control as FormControl : null;
+    const newState = matcher.isErrorState(control, parent);
 
     if (newState !== oldState) {
       this.errorState = newState;

src/lib/select/select.ts

@@ -45,7 +45,13 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
+import {
+  ControlValueAccessor,
+  FormGroupDirective,
+  NgControl,
+  NgForm,
+  FormControl
+} from '@angular/forms';
 import {
   CanDisable,
   HasTabIndex,
@@ -687,8 +693,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   get errorState(): boolean {
     const parent = this._parentFormGroup || this._parentForm;
     const matcher = this.errorStateMatcher || this._defaultErrorStateMatcher;
+    const control = this.ngControl ? this.ngControl.control as FormControl : null;
 
-    return matcher.isErrorState(this.ngControl, parent);
+    return matcher.isErrorState(control, parent);
   }
 
   private _initializeSelection(): void {

src/lib/stepper/stepper.ts

@@ -22,7 +22,7 @@ import {
   ViewEncapsulation,
   ChangeDetectionStrategy,
 } from '@angular/core';
-import {NgControl, FormGroupDirective, NgForm} from '@angular/forms';
+import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material/core';
 import {MatStepHeader} from './step-header';
 import {MatStepLabel} from './step-label';
@@ -51,7 +51,7 @@ export class MatStep extends _MatStep implements ErrorStateMatcher {
   }
 
   /** Custom error state matcher that additionally checks for validity of interacted form. */
-  isErrorState(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this._errorStateMatcher.isErrorState(control, form);
 
     // Custom error state checks for the validity of form that is not submitted or touched