Address comments pt. 2

Author: willshowell

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

@@ -46,9 +46,9 @@ export class InputDemo {
   }
 
   customErrorStateMatcher(c: NgControl): boolean {
-    const isDirty = c.dirty;
+    const hasInteraction = c.dirty || c.touched;
     const isInvalid = c.invalid;
 
-    return isDirty && isInvalid;
+    return !!(hasInteraction && isInvalid);
   }
 }

src/lib/core/core.ts

@@ -122,7 +122,9 @@ export {
 export {
   ErrorStateMatcher,
   ErrorOptions,
-  MD_ERROR_GLOBAL_OPTIONS
+  MD_ERROR_GLOBAL_OPTIONS,
+  defaultErrorStateMatcher,
+  showOnDirtyErrorStateMatcher
 } from './error/error-options';
 
 @NgModule({

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

@@ -10,8 +10,7 @@ import {InjectionToken} from '@angular/core';
 import {NgControl, FormGroupDirective, NgForm} 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 const MD_ERROR_GLOBAL_OPTIONS = new InjectionToken<ErrorOptions>('md-error-global-options');
 
 export type ErrorStateMatcher =
   (control: NgControl, parentFormGroup: FormGroupDirective, parentForm: NgForm) => boolean;
@@ -20,26 +19,24 @@ export interface ErrorOptions {
   errorStateMatcher?: ErrorStateMatcher;
 }
 
-export class DefaultErrorStateMatcher {
+export function defaultErrorStateMatcher(control: NgControl, formGroup: FormGroupDirective,
+    form: NgForm): boolean {
 
-  errorStateMatcher(control: NgControl, formGroup: FormGroupDirective, form: NgForm): boolean {
-    const isInvalid = control && control.invalid;
-    const isTouched = control && control.touched;
-    const isSubmitted = (formGroup && formGroup.submitted) ||
-        (form && form.submitted);
+  const isInvalid = control && control.invalid;
+  const isTouched = control && control.touched;
+  const isSubmitted = (formGroup && formGroup.submitted) ||
+      (form && form.submitted);
 
-    return !!(isInvalid && (isTouched || isSubmitted));
-  }
+  return !!(isInvalid && (isTouched || isSubmitted));
 }
 
-export class ShowOnDirtyErrorStateMatcher {
+export function showOnDirtyErrorStateMatcher(control: NgControl, formGroup: FormGroupDirective,
+    form: NgForm): boolean {
 
-  errorStateMatcher(control: NgControl, formGroup: FormGroupDirective, form: NgForm): boolean {
-    const isInvalid = control && control.invalid;
-    const isDirty = control && control.dirty;
-    const isSubmitted = (formGroup && formGroup.submitted) ||
-        (form && form.submitted);
+  const isInvalid = control && control.invalid;
+  const isDirty = control && control.dirty;
+  const isSubmitted = (formGroup && formGroup.submitted) ||
+      (form && form.submitted);
 
-    return !!(isInvalid && (isDirty || isSubmitted));
-  }
+  return !!(isInvalid && (isDirty || isSubmitted));
 }

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

@@ -24,7 +24,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 {MD_ERROR_GLOBAL_OPTIONS, showOnDirtyErrorStateMatcher} from '../core/error/error-options';
 
 describe('MdInputContainer', function () {
   beforeEach(async(() => {
@@ -817,7 +817,7 @@ describe('MdInputContainer', function () {
       expect(containerEl.querySelectorAll('md-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: [
@@ -830,7 +830,10 @@ describe('MdInputContainer', function () {
           MdInputContainerWithFormErrorMessages
         ],
         providers: [
-          { provide: MD_ERROR_GLOBAL_OPTIONS, useClass: ShowOnDirtyErrorStateMatcher }
+          {
+            provide: MD_ERROR_GLOBAL_OPTIONS,
+            useValue: { errorStateMatcher: showOnDirtyErrorStateMatcher }
+          }
         ]
       });
 
@@ -1136,8 +1139,8 @@ class MdInputContainerWithFormErrorMessages {
     <form #form="ngForm" novalidate>
       <md-input-container>
         <input mdInput
-          [formControl]="formControl"
-          [errorStateMatcher]="customErrorStateMatcher.bind(this)">
+            [formControl]="formControl"
+            [errorStateMatcher]="customErrorStateMatcher.bind(this)">
         <md-hint>Please type something</md-hint>
         <md-error>This field is required</md-error>
       </md-input-container>

src/lib/input/input-container.ts

@@ -43,7 +43,7 @@ import {
   MD_PLACEHOLDER_GLOBAL_OPTIONS
 } from '../core/placeholder/placeholder-options';
 import {
-  DefaultErrorStateMatcher,
+  defaultErrorStateMatcher,
   ErrorStateMatcher,
   ErrorOptions,
   MD_ERROR_GLOBAL_OPTIONS
@@ -241,8 +241,7 @@ export class MdInputDirective {
     this.id = this.id;
 
     this._errorOptions = errorOptions ? errorOptions : {};
-    this.errorStateMatcher = this._errorOptions.errorStateMatcher
-        || new DefaultErrorStateMatcher().errorStateMatcher;
+    this.errorStateMatcher = this._errorOptions.errorStateMatcher || defaultErrorStateMatcher;
   }
 
   /** Focuses the input element. */

src/lib/input/input.md

@@ -110,11 +110,12 @@ warn color.
 
 ### Custom Error Matcher
 
-By default, error messages are shown when the control is invalid and the user has interacted with
-(touched) the element or the parent form has been submitted. If you wish to customize this
-behavior (e.g. to show the error as soon as the invalid control is dirty), you can use the
-`errorStateMatcher` property of the `mdInput`. To use this property, create a function in
-your component class that returns a boolean. A result of `true` will display the error messages.
+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 `mdInput`. To use this property,
+create a function in your component class that returns a boolean. A result of `true` will display
+the error messages.
 
 ```html
 <md-input-container>
@@ -125,17 +126,18 @@ your component class that returns a boolean. A result of `true` will display the
 
 ```ts
 function myErrorStateMatcher(control: NgControl, parentFg: FormGroupDirective, parentForm: NgForm): boolean {
-  return control.invalid && control.dirty;
+  return !!(control.invalid && control.dirty);
 }
 ```
 
 A global error state matcher can be specified by setting the `MD_ERROR_GLOBAL_OPTIONS` provider. This applies
-to all inputs.
+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: MD_ERROR_GLOBAL_OPTIONS, useValue: { errorStateMatcher: myErrorStateMatcher }}
+    {provide: MD_ERROR_GLOBAL_OPTIONS, useValue: { errorStateMatcher: showOnDirtyErrorStateMatcher }}
   ]
 })
 ```
@@ -145,14 +147,3 @@ Here are the available global options:
 | Name              | Type     | Description |
 | ----------------- | -------- | ----------- |
 | errorStateMatcher | Function | Returns a boolean specifying if the error should be shown |
-
-
-If you just wish to make all inputs behave the same as the default, but show errors when
-dirty instead of touched, you can use the `ShowOnDirtyErrorStateMatcher` implementation.
-
-```ts
-@NgModule({
-  providers: [
-    { provide: MD_ERROR_GLOBAL_OPTIONS, useClass: ShowOnDirtyErrorStateMatcher }
-  ]
-})