refactor: address feedback

Author: crisbeto

src/lib/core/core.ts

@@ -127,8 +127,7 @@ export {
   MdErrorModule,
   MdError,
   ErrorStateMatcher,
-  ErrorOptions,
-  showOnDirtyErrorStateMatcher,
+  ShowOnDirtyErrorStateMatcher,
 } from './error/index';
 
 @NgModule({

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

@@ -9,21 +9,18 @@
 import {Injectable} from '@angular/core';
 import {FormGroupDirective, NgForm, NgControl} from '@angular/forms';
 
-export type ErrorStateMatcher =
-  (control: NgControl | null, form: FormGroupDirective | NgForm | null) => boolean;
-
-/** Returns whether control is invalid and is either dirty or is a part of a submitted form. */
-export const showOnDirtyErrorStateMatcher: ErrorStateMatcher = (control, form) => {
-  return control ? !!(control.invalid && (control.dirty || (form && form.submitted))) : false;
-};
+/** Error state matcher that matches when a control is invalid and dirty. */
+@Injectable()
+export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
+  match(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    return control ? !!(control.invalid && (control.dirty || (form && form.submitted))) : false;
+  }
+}
 
-/**
- * Provider that defines how form controls behave with
- * regards to displaying error messages.
- */
+/** Provider that defines how form controls behave with regards to displaying error messages. */
 @Injectable()
-export class ErrorOptions {
-  isErrorState(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
+export class ErrorStateMatcher {
+  match(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
     return control ? !!(control.invalid && (control.touched || (form && form.submitted))) : false;
   }
 }

src/lib/core/error/index.ts

@@ -9,12 +9,12 @@
 
 import {NgModule} from '@angular/core';
 import {MdError} from './error';
-import {ErrorOptions} from './error-options';
+import {ErrorStateMatcher} from './error-options';
 
 @NgModule({
   declarations: [MdError],
   exports: [MdError],
-  providers: [ErrorOptions],
+  providers: [ErrorStateMatcher],
 })
 export class MdErrorModule {}
 

src/lib/input/input-container.spec.ts

@@ -22,7 +22,7 @@ import {
   getMdInputContainerPlaceholderConflictError
 } from './input-container-errors';
 import {MD_PLACEHOLDER_GLOBAL_OPTIONS} from '../core/placeholder/placeholder-options';
-import {ErrorOptions, showOnDirtyErrorStateMatcher} from '../core/error/error-options';
+import {ErrorStateMatcher, ShowOnDirtyErrorStateMatcher} from '../core/error/error-options';
 
 describe('MdInputContainer without forms', function () {
   beforeEach(async(() => {
@@ -895,11 +895,7 @@ describe('MdInputContainer with forms', () => {
         declarations: [
           MdInputContainerWithFormErrorMessages
         ],
-        providers: [
-          {
-            provide: ErrorOptions,
-            useValue: { isErrorState: globalErrorStateMatcher } }
-        ]
+        providers: [{ provide: ErrorStateMatcher, useValue: { match: globalErrorStateMatcher } }]
       });
 
       let fixture = TestBed.createComponent(MdInputContainerWithFormErrorMessages);
@@ -926,12 +922,7 @@ describe('MdInputContainer with forms', () => {
         declarations: [
           MdInputContainerWithFormErrorMessages
         ],
-        providers: [
-          {
-            provide: ErrorOptions,
-            useValue: { isErrorState: showOnDirtyErrorStateMatcher }
-          }
-        ]
+        providers: [{ provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }]
       });
 
       let fixture = TestBed.createComponent(MdInputContainerWithFormErrorMessages);
@@ -1260,7 +1251,9 @@ class MdInputContainerWithCustomErrorStateMatcher {
   });
 
   errorState = false;
-  customErrorStateMatcher = () => this.errorState;
+  customErrorStateMatcher: ErrorStateMatcher = {
+    match: () => this.errorState
+  };
 }
 
 @Component({

src/lib/input/input-container.ts

@@ -44,7 +44,7 @@ import {
   MD_PLACEHOLDER_GLOBAL_OPTIONS,
   PlaceholderOptions
 } from '../core/placeholder/placeholder-options';
-import {ErrorOptions, ErrorStateMatcher, MdError} from '../core/error/index';
+import {ErrorStateMatcher, MdError} from '../core/error/index';
 import {Subject} from 'rxjs/Subject';
 import {startWith} from '@angular/cdk/rxjs';
 
@@ -188,7 +188,7 @@ export class MdInputDirective implements OnChanges, OnDestroy, DoCheck {
   get readonly() { return this._readonly; }
   set readonly(value: any) { this._readonly = coerceBooleanProperty(value); }
 
-  /** 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. */
@@ -222,7 +222,7 @@ export class MdInputDirective implements OnChanges, OnDestroy, DoCheck {
   constructor(private _elementRef: ElementRef,
               private _renderer: Renderer2,
               private _platform: Platform,
-              private _errorOptions: ErrorOptions,
+              private _globalErrorStateMatcher: ErrorStateMatcher,
               @Optional() @Self() public _ngControl: NgControl,
               @Optional() private _parentForm: NgForm,
               @Optional() private _parentFormGroup: FormGroupDirective) {
@@ -300,9 +300,8 @@ export class MdInputDirective implements OnChanges, OnDestroy, DoCheck {
   /** Re-evaluates the error state. This is only relevant with @angular/forms. */
   private _updateErrorState() {
     const oldState = this._isErrorState;
-    const newState = this.errorStateMatcher ?
-        this.errorStateMatcher(this._ngControl, this._parentFormGroup || this._parentForm) :
-        this._errorOptions.isErrorState(this._ngControl, this._parentFormGroup || this._parentForm);
+    const matcher = this.errorStateMatcher || this._globalErrorStateMatcher;
+    const newState = matcher.match(this._ngControl, this._parentFormGroup || this._parentForm);
 
     if (newState !== oldState) {
       this._isErrorState = newState;

src/lib/input/input.md

@@ -125,21 +125,23 @@ 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 {
+  match(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    // Error when invalid control is dirty, touched, or submitted
+    const isSubmitted = form && form.submitted;
+    return !!(control.invalid && (control.dirty || control.touched || isSubmitted)));
+  }
 }
 ```
 
 A global error state matcher can be specified by setting the `ErrorOptions` provider. This applies
-to all inputs. For convenience, `showOnDirtyErrorStateMatcher` is available in order to globally
+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: ErrorOptions, useValue: { isErrorState: showOnDirtyErrorStateMatcher }}
+    {provide: ErrorOptions, useClass: ShowOnDirtyErrorStateMatcher}
   ]
 })
 ```

src/lib/select/select.spec.ts

@@ -31,7 +31,7 @@ import {Subject} from 'rxjs/Subject';
 import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 import {dispatchFakeEvent, dispatchKeyboardEvent, wrappedErrorMessage} from '@angular/cdk/testing';
 import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
-import {ErrorOptions} from '../core/error/error-options';
+import {ErrorStateMatcher} from '../core/error/error-options';
 import {
   FloatPlaceholderType,
   MD_PLACEHOLDER_GLOBAL_OPTIONS
@@ -2689,24 +2689,24 @@ describe('MdSelect', () => {
       expect(component.control.invalid).toBe(false);
       expect(component.select._isErrorState()).toBe(false);
 
-      customErrorFixture.componentInstance.errorStateMatcher = matcher;
+      customErrorFixture.componentInstance.errorStateMatcher = { match: matcher };
       customErrorFixture.detectChanges();
 
       expect(component.select._isErrorState()).toBe(true);
       expect(matcher).toHaveBeenCalled();
     });
 
     it('should be able to override the error matching behavior via the injection token', () => {
-      const errorOptions: ErrorOptions = {
-        isErrorState: jasmine.createSpy('error state matcher').and.returnValue(true)
+      const errorOptions: ErrorStateMatcher = {
+        match: jasmine.createSpy('error state matcher').and.returnValue(true)
       };
 
       fixture.destroy();
 
       TestBed.resetTestingModule().configureTestingModule({
         imports: [MdSelectModule, ReactiveFormsModule, FormsModule, NoopAnimationsModule],
         declarations: [SelectInsideFormGroup],
-        providers: [{ provide: ErrorOptions, useValue: errorOptions }],
+        providers: [{ provide: ErrorStateMatcher, useValue: errorOptions }],
       });
 
       const errorFixture = TestBed.createComponent(SelectInsideFormGroup);
@@ -2715,7 +2715,7 @@ describe('MdSelect', () => {
       errorFixture.detectChanges();
 
       expect(component.select._isErrorState()).toBe(true);
-      expect(errorOptions.errorStateMatcher).toHaveBeenCalled();
+      expect(errorOptions.match).toHaveBeenCalled();
     });
   });
 
@@ -3272,6 +3272,6 @@ class CustomErrorBehaviorSelect {
     { value: 'steak-0', viewValue: 'Steak' },
     { value: 'pizza-1', viewValue: 'Pizza' },
   ];
-  errorStateMatcher = () => false;
+  errorStateMatcher: ErrorStateMatcher;
 }
 

src/lib/select/select.ts

@@ -57,7 +57,7 @@ import {
 // tslint:disable-next-line:no-unused-variable
 import {ScrollStrategy, RepositionScrollStrategy} from '../core/overlay/scroll';
 import {Platform} from '@angular/cdk/platform';
-import {ErrorStateMatcher, ErrorOptions} from '../core/error/error-options';
+import {ErrorStateMatcher} from '../core/error/error-options';
 
 /**
  * The following style constants are necessary to save here in order
@@ -361,7 +361,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
   /** Input that can be used to specify the `aria-labelledby` attribute. */
   @Input('aria-labelledby') ariaLabelledby: string = '';
 
-  /** A function used to control when error messages are shown. */
+  /** An object used to control when error messages are shown. */
   @Input() errorStateMatcher: ErrorStateMatcher;
 
   /** Combined stream of all of the child options' change events. */
@@ -390,7 +390,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
     private _changeDetectorRef: ChangeDetectorRef,
     private _overlay: Overlay,
     private _platform: Platform,
-    private _errorOptions: ErrorOptions,
+    private _globalErrorStateMatcher: ErrorStateMatcher,
     renderer: Renderer2,
     elementRef: ElementRef,
     @Optional() private _dir: Directionality,
@@ -638,12 +638,8 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
 
   /** Whether the select is in an error state. */
   _isErrorState(): boolean {
-    if (this.errorStateMatcher) {
-      return this.errorStateMatcher(this._control, this._parentFormGroup || this._parentForm);
-    }
-
-    return this._errorOptions.isErrorState(this._control,
-        this._parentFormGroup || this._parentForm);
+    const matcher = this.errorStateMatcher || this._globalErrorStateMatcher;
+    return matcher.match(this._control, this._parentFormGroup || this._parentForm);
   }
 
   /**