feat(select): add support for custom errorStateMatcher

src/lib/core/_core.scss

@@ -7,6 +7,8 @@
 @import 'option/option-theme';
 @import 'option/optgroup';
 @import 'option/optgroup-theme';
+@import 'error/error';
+@import 'error/error-theme';
 @import 'selection/pseudo-checkbox/pseudo-checkbox-theme';
 @import 'typography/all-typography';
 
@@ -25,6 +27,7 @@
   @include mat-ripple();
   @include mat-option();
   @include mat-optgroup();
+  @include mat-error();
   @include cdk-a11y();
   @include cdk-overlay();
 }
@@ -35,6 +38,7 @@
   @include mat-option-theme($theme);
   @include mat-optgroup-theme($theme);
   @include mat-pseudo-checkbox-theme($theme);
+  @include mat-error-theme($theme);
 
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `md-sidenav-container`.

src/lib/core/core.ts

@@ -16,6 +16,7 @@ import {OverlayModule} from './overlay/index';
 import {A11yModule} from './a11y/index';
 import {MdSelectionModule} from './selection/index';
 import {MdRippleModule} from './ripple/index';
+import {MdErrorModule} from './error/index';
 
 // Re-exports of the CDK to avoid breaking changes.
 export {
@@ -123,12 +124,11 @@ export {
 
 // Error
 export {
+  MdErrorModule,
+  MdError,
   ErrorStateMatcher,
-  ErrorOptions,
-  MD_ERROR_GLOBAL_OPTIONS,
-  defaultErrorStateMatcher,
-  showOnDirtyErrorStateMatcher
-} from './error/error-options';
+  ShowOnDirtyErrorStateMatcher,
+} from './error/index';
 
 @NgModule({
   imports: [
@@ -141,6 +141,7 @@ export {
     A11yModule,
     MdOptionModule,
     MdSelectionModule,
+    MdErrorModule,
   ],
   exports: [
     MdLineModule,
@@ -152,6 +153,7 @@ export {
     A11yModule,
     MdOptionModule,
     MdSelectionModule,
+    MdErrorModule,
   ],
 })
 export class MdCoreModule {}

src/lib/core/error/_error-theme.scss

@@ -0,0 +1,9 @@
+@import '../theming/palette';
+@import '../theming/theming';
+
+
+@mixin mat-error-theme($theme) {
+  .mat-error {
+    color: mat-color(map-get($theme, warn));
+  }
+}

src/lib/core/error/_error.scss

@@ -0,0 +1,5 @@
+@mixin mat-error {
+  .mat-error {
+    display: block;
+  }
+}

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

@@ -6,28 +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 MD_ERROR_GLOBAL_OPTIONS = new InjectionToken<ErrorOptions>('md-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))) : false;
+  }
 }
 
-/** 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))) : false;
+  }
 }

src/lib/core/error/error.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 {Directive, Input} from '@angular/core';
+
+let nextUniqueId = 0;
+
+/** Single error message to be shown underneath a form control. */
+@Directive({
+  selector: 'md-error, mat-error',
+  host: {
+    'class': 'mat-error',
+    'role': 'alert',
+    '[attr.id]': 'id',
+  }
+})
+export class MdError {
+  @Input() id: string = `md-input-error-${nextUniqueId++}`;
+}

src/lib/core/error/index.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 {MdError} from './error';
+import {ErrorStateMatcher} from './error-options';
+
+@NgModule({
+  declarations: [MdError],
+  exports: [MdError],
+  providers: [ErrorStateMatcher],
+})
+export class MdErrorModule {}
+
+
+export * from './error';
+export * from './error-options';

src/lib/input/_input-theme.scss

@@ -94,10 +94,6 @@
       background-color: $input-underline-color-warn;
     }
   }
-
-  .mat-input-error {
-    color: $input-underline-color-warn;
-  }
 }
 
 // Applies a floating placeholder above the input itself.

src/lib/input/index.ts

@@ -8,7 +8,6 @@
 
 import {NgModule} from '@angular/core';
 import {
-  MdErrorDirective,
   MdHint,
   MdInputContainer,
   MdInputDirective,
@@ -19,11 +18,11 @@ import {
 import {MdTextareaAutosize} from './autosize';
 import {CommonModule} from '@angular/common';
 import {PlatformModule} from '../core/platform/index';
+import {MdErrorModule} from '../core/error/index';
 
 
 @NgModule({
   declarations: [
-    MdErrorDirective,
     MdHint,
     MdInputContainer,
     MdInputDirective,
@@ -35,16 +34,17 @@ import {PlatformModule} from '../core/platform/index';
   imports: [
     CommonModule,
     PlatformModule,
+    MdErrorModule,
   ],
   exports: [
-    MdErrorDirective,
     MdHint,
     MdInputContainer,
     MdInputDirective,
     MdPlaceholder,
     MdPrefix,
     MdSuffix,
     MdTextareaAutosize,
+    MdErrorModule,
   ],
 })
 export class MdInputModule {}

src/lib/input/input-container.scss

@@ -252,8 +252,3 @@ textarea.mat-input-element {
 .mat-input-hint-spacer {
   flex: 1 0 $mat-input-hint-min-space;
 }
-
-// Single error message displayed beneath the input.
-.mat-input-error {
-  display: block;
-}

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 {MD_ERROR_GLOBAL_OPTIONS, showOnDirtyErrorStateMatcher} from '../core/error/error-options';
+import {ErrorStateMatcher, ShowOnDirtyErrorStateMatcher} from '../core/error/error-options';
 
 describe('MdInputContainer without forms', function () {
   beforeEach(async(() => {
@@ -840,7 +840,7 @@ describe('MdInputContainer with forms', () => {
       fixture.componentInstance.formControl.markAsTouched();
       fixture.detectChanges();
 
-      let errorIds = fixture.debugElement.queryAll(By.css('.mat-input-error'))
+      let errorIds = fixture.debugElement.queryAll(By.css('.mat-error'))
           .map(el => el.nativeElement.getAttribute('id')).join(' ');
       describedBy = inputEl.getAttribute('aria-describedby');
 
@@ -896,9 +896,7 @@ describe('MdInputContainer with forms', () => {
           MdInputContainerWithFormErrorMessages
         ],
         providers: [
-          {
-            provide: MD_ERROR_GLOBAL_OPTIONS,
-            useValue: { errorStateMatcher: globalErrorStateMatcher } }
+          { provide: ErrorStateMatcher, useValue: { isErrorState: globalErrorStateMatcher } }
         ]
       });
 
@@ -926,12 +924,7 @@ describe('MdInputContainer with forms', () => {
         declarations: [
           MdInputContainerWithFormErrorMessages
         ],
-        providers: [
-          {
-            provide: MD_ERROR_GLOBAL_OPTIONS,
-            useValue: { errorStateMatcher: showOnDirtyErrorStateMatcher }
-          }
-        ]
+        providers: [{ provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }]
       });
 
       let fixture = TestBed.createComponent(MdInputContainerWithFormErrorMessages);
@@ -1247,7 +1240,7 @@ class MdInputContainerWithFormErrorMessages {
       <md-input-container>
         <input mdInput
             formControlName="name"
-            [errorStateMatcher]="customErrorStateMatcher.bind(this)">
+            [errorStateMatcher]="customErrorStateMatcher">
         <md-hint>Please type something</md-hint>
         <md-error>This field is required</md-error>
       </md-input-container>
@@ -1260,10 +1253,9 @@ class MdInputContainerWithCustomErrorStateMatcher {
   });
 
   errorState = false;
-
-  customErrorStateMatcher(): boolean {
-    return this.errorState;
-  }
+  customErrorStateMatcher: ErrorStateMatcher = {
+    isErrorState: () => this.errorState
+  };
 }
 
 @Component({