refactor(material/core): extract error tracking behavior into a class

Moves the error tracking behavior into a separate class that we can use instead of `mixinErrorState`.

Author: crisbeto

src/material/core/common-behaviors/error-state.ts

@@ -37,6 +37,43 @@ export interface HasErrorState {
   stateChanges: Subject<void>;
 }
 
+/**
+ * Class that tracks the error state of a component.
+ * @docs-private
+ */
+export class _ErrorStateTracker {
+  /** Whether the tracker is currently in an error state. */
+  errorState = false;
+
+  /** User-defined matcher for the error state. */
+  matcher: ErrorStateMatcher;
+
+  constructor(
+    private _defaultMatcher: ErrorStateMatcher | null,
+    public ngControl: NgControl | null,
+    private _parentFormGroup: FormGroupDirective | null,
+    private _parentForm: NgForm | null,
+    private _stateChanges: Subject<void>,
+  ) {}
+
+  /** Updates the error state based on the provided error state matcher. */
+  updateErrorState() {
+    const oldState = this.errorState;
+    const parent = this._parentFormGroup || this._parentForm;
+    const matcher = this.matcher || this._defaultMatcher;
+    const control = this.ngControl ? (this.ngControl.control as AbstractControl) : null;
+    // Note: the null check here shouldn't be necessary, but there's an internal
+    // test that appears to pass an object whose `isErrorState` isn't a function.
+    const newState =
+      typeof matcher?.isErrorState === 'function' ? matcher.isErrorState(control, parent) : false;
+
+    if (newState !== oldState) {
+      this.errorState = newState;
+      this._stateChanges.next();
+    }
+  }
+}
+
 /**
  * Mixin to augment a directive with updateErrorState method.
  * For component with `errorState` and need to update `errorState`.
@@ -48,24 +85,41 @@ export function mixinErrorState<T extends Constructor<HasErrorState>>(
   base: T,
 ): CanUpdateErrorStateCtor & T {
   return class extends base {
+    private _tracker: _ErrorStateTracker | undefined;
+
     /** Whether the component is in an error state. */
-    errorState: boolean = false;
+    get errorState() {
+      return this._getTracker().errorState;
+    }
+    set errorState(value: boolean) {
+      this._getTracker().errorState = value;
+    }
 
     /** An object used to control the error state of the component. */
-    errorStateMatcher: ErrorStateMatcher;
+    get errorStateMatcher() {
+      return this._getTracker().matcher;
+    }
+    set errorStateMatcher(value: ErrorStateMatcher) {
+      this._getTracker().matcher = value;
+    }
 
     /** Updates the error state based on the provided error state matcher. */
     updateErrorState() {
-      const oldState = this.errorState;
-      const parent = this._parentFormGroup || this._parentForm;
-      const matcher = this.errorStateMatcher || this._defaultErrorStateMatcher;
-      const control = this.ngControl ? (this.ngControl.control as AbstractControl) : null;
-      const newState = matcher.isErrorState(control, parent);
-
-      if (newState !== oldState) {
-        this.errorState = newState;
-        this.stateChanges.next();
+      this._getTracker().updateErrorState();
+    }
+
+    private _getTracker() {
+      if (!this._tracker) {
+        this._tracker = new _ErrorStateTracker(
+          this._defaultErrorStateMatcher,
+          this.ngControl,
+          this._parentFormGroup,
+          this._parentForm,
+          this.stateChanges,
+        );
       }
+
+      return this._tracker;
     }
 
     constructor(...args: any[]) {

src/material/core/common-behaviors/index.ts

@@ -26,5 +26,5 @@ export {CanDisable, mixinDisabled} from './disabled';
 export {CanColor, mixinColor, ThemePalette} from './color';
 export {CanDisableRipple, mixinDisableRipple} from './disable-ripple';
 export {HasTabIndex, mixinTabIndex} from './tabindex';
-export {CanUpdateErrorState, mixinErrorState} from './error-state';
+export {CanUpdateErrorState, mixinErrorState, _ErrorStateTracker} from './error-state';
 export {HasInitialized, mixinInitialized} from './initialized';

tools/public_api_guard/material/core.md

@@ -133,6 +133,16 @@ export class ErrorStateMatcher {
     static ɵprov: i0.ɵɵInjectableDeclaration<ErrorStateMatcher>;
 }
 
+// @public
+export class _ErrorStateTracker {
+    constructor(_defaultMatcher: ErrorStateMatcher | null, ngControl: NgControl | null, _parentFormGroup: FormGroupDirective | null, _parentForm: NgForm | null, _stateChanges: Subject<void>);
+    errorState: boolean;
+    matcher: ErrorStateMatcher;
+    // (undocumented)
+    ngControl: NgControl | null;
+    updateErrorState(): void;
+}
+
 // @public
 export function _getOptionScrollPosition(optionOffset: number, optionHeight: number, currentScrollPosition: number, panelHeight: number): number;