feat(select): add support for custom error state matcher (#7443)

Fixes #7419.

Author: crisbeto

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

@@ -1,5 +1,6 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
+import {FormControl, NgControl, Validators} from '@angular/forms';
+import {ErrorStateMatcher} from '@angular/material';
 
 
 let max = 5;
@@ -52,10 +53,16 @@ export class InputDemo {
     }
   }
 
-  customErrorStateMatcher(c: FormControl): boolean {
-    const hasInteraction = c.dirty || c.touched;
-    const isInvalid = c.invalid;
+  customErrorStateMatcher: ErrorStateMatcher = {
+    isErrorState: (control: NgControl | null) => {
+      if (control) {
+        const hasInteraction = control.dirty || control.touched;
+        const isInvalid = control.invalid;
 
-    return !!(hasInteraction && isInvalid);
-  }
+        return !!(hasInteraction && isInvalid);
+      }
+
+      return false;
+    }
+  };
 }

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

@@ -6,29 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InjectionToken} from '@angular/core';
-import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
+import {Injectable} from '@angular/core';
+import {FormGroupDirective, NgForm, NgControl} from '@angular/forms';
 
-/** Injection token that can be used to specify the global error options. */
-export const MAT_ERROR_GLOBAL_OPTIONS =
-    new InjectionToken<ErrorOptions>('mat-error-global-options');
-
-export type ErrorStateMatcher =
-    (control: FormControl, form: FormGroupDirective | NgForm) => boolean;
-
-export interface ErrorOptions {
-  errorStateMatcher?: ErrorStateMatcher;
-}
-
-/** Returns whether control is invalid and is either touched or is a part of a submitted form. */
-export function defaultErrorStateMatcher(control: FormControl, form: FormGroupDirective | NgForm) {
-  const isSubmitted = form && form.submitted;
-  return !!(control.invalid && (control.touched || isSubmitted));
+/** 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 {
+    return !!(control && control.invalid && (control.dirty || (form && form.submitted)));
+  }
 }
 
-/** Returns whether control is invalid and is either dirty or is a part of a submitted form. */
-export function showOnDirtyErrorStateMatcher(control: FormControl,
-    form: FormGroupDirective | NgForm) {
-  const isSubmitted = form && form.submitted;
-  return !!(control.invalid && (control.dirty || isSubmitted));
+/** 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 {
+    return !!(control && control.invalid && (control.touched || (form && form.submitted)));
+  }
 }

src/lib/input/input-module.ts

@@ -12,6 +12,7 @@ import {NgModule} from '@angular/core';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatTextareaAutosize} from './autosize';
 import {MatInput} from './input';
+import {ErrorStateMatcher} from '@angular/material/core';
 
 
 @NgModule({
@@ -31,5 +32,6 @@ import {MatInput} from './input';
     MatInput,
     MatTextareaAutosize,
   ],
+  providers: [ErrorStateMatcher],
 })
 export class MatInputModule {}

src/lib/input/input.md

@@ -111,12 +111,12 @@ warn color.
 
 ### Custom Error Matcher
 
-By default, error messages are shown when the control is invalid and either the user has interacted with
-(touched) the element or the parent form has been submitted. If you wish to override this
+By default, error messages are shown when the control is invalid and either the user has interacted
+with (touched) the element or the parent form has been submitted. If you wish to override this
 behavior (e.g. to show the error as soon as the invalid control is dirty or when a parent form group
 is invalid), you can use the `errorStateMatcher` property of the `matInput`. To use this property,
-create a function in your component class that returns a boolean. A result of `true` will display
-the error messages.
+create an `ErrorStateMatcher` object in your component class that has a `isErrorState` function which
+returns a boolean. A result of `true` will display the error messages.
 
 ```html
 <mat-form-field>
@@ -126,25 +126,26 @@ the error messages.
 ```
 
 ```ts
-function myErrorStateMatcher(control: FormControl, form: FormGroupDirective | NgForm): boolean {
-  // Error when invalid control is dirty, touched, or submitted
-  const isSubmitted = form && form.submitted;
-  return !!(control.invalid && (control.dirty || control.touched || isSubmitted));
+class MyErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: NgControl | 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)));
+  }
 }
 ```
 
-A global error state matcher can be specified by setting the `MAT_ERROR_GLOBAL_OPTIONS` provider. This applies
-to all inputs. For convenience, `showOnDirtyErrorStateMatcher` is available in order to globally set
-input errors to show when the input is dirty and invalid.
+A global error state matcher can be specified by setting the `ErrorStateMatcher` provider. This
+applies to all inputs. For convenience, `ShowOnDirtyErrorStateMatcher` is available in order to
+globally cause input errors to show when the input is dirty and invalid.
 
 ```ts
 @NgModule({
   providers: [
-    {provide: MAT_ERROR_GLOBAL_OPTIONS, useValue: {errorStateMatcher: showOnDirtyErrorStateMatcher}}
+    {provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}
   ]
 })
 ```
-
 Here are the available global options:
 
 | Name              | Type     | Description |

src/lib/input/input.spec.ts

@@ -12,9 +12,9 @@ import {
   Validators,
 } from '@angular/forms';
 import {
-  MAT_ERROR_GLOBAL_OPTIONS,
   MAT_PLACEHOLDER_GLOBAL_OPTIONS,
-  showOnDirtyErrorStateMatcher,
+  ShowOnDirtyErrorStateMatcher,
+  ErrorStateMatcher,
 } from '@angular/material/core';
 import {
   getMatFormFieldDuplicatedHintError,
@@ -926,12 +926,6 @@ describe('MatInput with forms', () => {
     });
 
     it('should display an error message when global error matcher returns true', () => {
-
-      // Global error state matcher that will always cause errors to show
-      function globalErrorStateMatcher() {
-        return true;
-      }
-
       TestBed.resetTestingModule();
       TestBed.configureTestingModule({
         imports: [
@@ -944,11 +938,7 @@ describe('MatInput with forms', () => {
         declarations: [
           MatInputWithFormErrorMessages
         ],
-        providers: [
-          {
-            provide: MAT_ERROR_GLOBAL_OPTIONS,
-            useValue: { errorStateMatcher: globalErrorStateMatcher } }
-        ]
+        providers: [{provide: ErrorStateMatcher, useValue: {isErrorState: () => true}}]
       });
 
       let fixture = TestBed.createComponent(MatInputWithFormErrorMessages);
@@ -963,7 +953,7 @@ describe('MatInput with forms', () => {
       expect(containerEl.querySelectorAll('mat-error').length).toBe(1, 'Expected an error message');
     });
 
-    it('should display an error message when using showOnDirtyErrorStateMatcher', async(() => {
+    it('should display an error message when using ShowOnDirtyErrorStateMatcher', async(() => {
       TestBed.resetTestingModule();
       TestBed.configureTestingModule({
         imports: [
@@ -976,12 +966,7 @@ describe('MatInput with forms', () => {
         declarations: [
           MatInputWithFormErrorMessages
         ],
-        providers: [
-          {
-            provide: MAT_ERROR_GLOBAL_OPTIONS,
-            useValue: { errorStateMatcher: showOnDirtyErrorStateMatcher }
-          }
-        ]
+        providers: [{provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}]
       });
 
       let fixture = TestBed.createComponent(MatInputWithFormErrorMessages);
@@ -1298,7 +1283,7 @@ class MatInputWithFormErrorMessages {
       <mat-form-field>
         <input matInput
             formControlName="name"
-            [errorStateMatcher]="customErrorStateMatcher.bind(this)">
+            [errorStateMatcher]="customErrorStateMatcher">
         <mat-hint>Please type something</mat-hint>
         <mat-error>This field is required</mat-error>
       </mat-form-field>
@@ -1312,9 +1297,9 @@ class MatInputWithCustomErrorStateMatcher {
 
   errorState = false;
 
-  customErrorStateMatcher(): boolean {
-    return this.errorState;
-  }
+  customErrorStateMatcher = {
+    isErrorState: () => this.errorState
+  };
 }
 
 @Component({

src/lib/input/input.ts

@@ -10,7 +10,6 @@ import {
   Directive,
   DoCheck,
   ElementRef,
-  Inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -19,15 +18,10 @@ import {
   Self,
 } from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {FormControl, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
+import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {Platform, getSupportedInputTypes} from '@angular/cdk/platform';
 import {getMatInputUnsupportedTypeError} from './input-errors';
-import {
-  defaultErrorStateMatcher,
-  ErrorOptions,
-  ErrorStateMatcher,
-  MAT_ERROR_GLOBAL_OPTIONS
-} from '@angular/material/core';
+import {ErrorStateMatcher} from '@angular/material/core';
 import {Subject} from 'rxjs/Subject';
 import {MatFormFieldControl} from '@angular/material/form-field';
 
@@ -75,7 +69,6 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
   protected _required = false;
   protected _id: string;
   protected _uid = `mat-input-${nextUniqueId++}`;
-  protected _errorOptions: ErrorOptions;
   protected _previousNativeValue = this.value;
   private _readonly = false;
 
@@ -130,7 +123,7 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
     }
   }
 
-  /** A function used to control when error messages are shown. */
+  /** An object used to control when error messages are shown. */
   @Input() errorStateMatcher: ErrorStateMatcher;
 
   /** The input element's value. */
@@ -163,12 +156,10 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
               @Optional() @Self() public ngControl: NgControl,
               @Optional() protected _parentForm: NgForm,
               @Optional() protected _parentFormGroup: FormGroupDirective,
-              @Optional() @Inject(MAT_ERROR_GLOBAL_OPTIONS) errorOptions: ErrorOptions) {
+              private _defaultErrorStateMatcher: ErrorStateMatcher) {
 
     // Force setter to be called in case id was not specified.
     this.id = this.id;
-    this._errorOptions = errorOptions ? errorOptions : {};
-    this.errorStateMatcher = this._errorOptions.errorStateMatcher || defaultErrorStateMatcher;
 
     // On some versions of iOS the caret gets stuck in the wrong place when holding down the delete
     // key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
@@ -231,9 +222,9 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
   /** Re-evaluates the error state. This is only relevant with @angular/forms. */
   protected _updateErrorState() {
     const oldState = this.errorState;
-    const ngControl = this.ngControl;
     const parent = this._parentFormGroup || this._parentForm;
-    const newState = ngControl && this.errorStateMatcher(ngControl.control as FormControl, parent);
+    const matcher = this.errorStateMatcher || this._defaultErrorStateMatcher;
+    const newState = matcher.isErrorState(this.ngControl, parent);
 
     if (newState !== oldState) {
       this.errorState = newState;

src/lib/select/select-module.ts

@@ -5,13 +5,13 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MatSelect, MatSelectTrigger, MAT_SELECT_SCROLL_STRATEGY_PROVIDER} from './select';
 import {MatCommonModule, MatOptionModule} from '@angular/material/core';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {MatFormFieldModule} from '@angular/material/form-field';
+import {ErrorStateMatcher} from '@angular/material/core';
 
 
 @NgModule({
@@ -23,6 +23,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   ],
   exports: [MatFormFieldModule, MatSelect, MatSelectTrigger, MatOptionModule, MatCommonModule],
   declarations: [MatSelect, MatSelectTrigger],
-  providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER]
+  providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER, ErrorStateMatcher]
 })
 export class MatSelectModule {}