feat(input): Add custom error state function

Author: willshowell

src/demo-app/input/input-demo.html

@@ -94,6 +94,13 @@ <h4>Inside a form</h4>
 
       <button color="primary" md-raised-button>Submit</button>
     </form>
+
+    <h4>With a custom error function</h4>
+    <md-input-container [errorStateFn]="customErrorStateFn">
+      <input mdInput placeholder="example" [(ngModel)]="errorMessageExample4" required>
+      <md-error>This field is required</md-error>
+    </md-input-container>
+
   </md-card-content>
 </md-card>
 

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
+import {FormControl, Validators, NgControl} from '@angular/forms';
 
 
 let max = 5;
@@ -23,6 +23,7 @@ export class InputDemo {
   errorMessageExample1: string;
   errorMessageExample2: string;
   errorMessageExample3: string;
+  errorMessageExample4: string;
   items: any[] = [
     { value: 10 },
     { value: 20 },
@@ -40,4 +41,11 @@ export class InputDemo {
       this.items.push({ value: ++max });
     }
   }
+
+  customErrorStateFn(c: NgControl): boolean {
+    const isDirty = c.dirty;
+    const isInvalid = c.invalid;
+
+    return isDirty && isInvalid;
+  }
 }

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

@@ -6,6 +6,7 @@ import {
   FormGroupDirective,
   FormsModule,
   NgForm,
+  NgControl,
   ReactiveFormsModule,
   Validators
 } from '@angular/forms';
@@ -56,6 +57,7 @@ describe('MdInputContainer', function () {
         MdInputContainerWithDynamicPlaceholder,
         MdInputContainerWithFormControl,
         MdInputContainerWithFormErrorMessages,
+        MdInputContainerWithCustomErrorStateFunction,
         MdInputContainerWithFormGroupErrorMessages,
         MdInputContainerWithId,
         MdInputContainerWithPrefixAndSuffix,
@@ -669,6 +671,36 @@ describe('MdInputContainer', function () {
       });
     }));
 
+    it('should display an error message when a custom error function returns true', async(() => {
+      fixture.destroy();
+
+      let customFixture = TestBed.createComponent(MdInputContainerWithCustomErrorStateFunction);
+      let component: MdInputContainerWithCustomErrorStateFunction;
+
+      customFixture.detectChanges();
+      component = customFixture.componentInstance;
+      containerEl = customFixture.debugElement.query(By.css('md-input-container')).nativeElement;
+
+      expect(component.formControl.invalid).toBe(true, 'Expected form control to be invalid');
+      expect(containerEl.querySelectorAll('md-error').length).toBe(0, 'Expected no error messages');
+
+      component.formControl.markAsTouched();
+      customFixture.detectChanges();
+
+      customFixture.whenStable().then(() => {
+        expect(containerEl.querySelectorAll('md-error').length)
+          .toBe(0, 'Expected no error messages after being touched.');
+
+        component.errorState = true;
+        customFixture.detectChanges();
+
+        customFixture.whenStable().then(() => {
+          expect(containerEl.querySelectorAll('md-error').length)
+            .toBe(1, 'Expected one error messages to have been rendered.');
+        });
+      });
+    }));
+
     it('should hide the errors and show the hints once the input becomes valid', async(() => {
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
@@ -982,6 +1014,27 @@ class MdInputContainerWithFormErrorMessages {
   renderError = true;
 }
 
+@Component({
+  template: `
+    <form #form="ngForm" novalidate>
+      <md-input-container [errorStateFn]="customErrorStateFn.bind(this)">
+        <input mdInput [formControl]="formControl">
+        <md-hint>Please type something</md-hint>
+        <md-error>This field is required</md-error>
+      </md-input-container>
+    </form>
+  `
+})
+class MdInputContainerWithCustomErrorStateFunction {
+  @ViewChild('form') form: NgForm;
+  formControl = new FormControl('', Validators.required);
+  errorState = false;
+
+  customErrorStateFn(c: NgControl): boolean {
+    return this.errorState;
+  }
+}
+
 @Component({
   template: `
     <form [formGroup]="formGroup" novalidate>

src/lib/input/input-container.ts

@@ -336,6 +336,9 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
   }
   private _floatPlaceholder: FloatPlaceholderType = 'auto';
 
+  /** A function used to control when error messages are shown. */
+  @Input() errorStateFn: (control: NgControl) => boolean;
+
   @ViewChild('underline') underlineRef: ElementRef;
 
   @ContentChild(MdInputDirective) _mdInputChild: MdInputDirective;
@@ -391,6 +394,16 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
   /** Whether the input container is in an error state. */
   _isErrorState(): boolean {
     const control = this._mdInputChild._ngControl;
+    return this.errorStateFn ? this.errorStateFn(control) : this._defaultErrorStateFn(control);
+  }
+
+  /** Determines whether to display hints or errors. */
+  _getDisplayedMessages(): 'error' | 'hint' {
+    return (this._errorChildren.length > 0 && this._isErrorState()) ? 'error' : 'hint';
+  }
+
+  /** Default error state calculation */
+  private _defaultErrorStateFn(control: NgControl): boolean {
     const isInvalid = control && control.invalid;
     const isTouched = control && control.touched;
     const isSubmitted = (this._parentFormGroup && this._parentFormGroup.submitted) ||
@@ -399,11 +412,6 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
     return !!(isInvalid && (isTouched || isSubmitted));
   }
 
-  /** Determines whether to display hints or errors. */
-  _getDisplayedMessages(): 'error' | 'hint' {
-    return (this._errorChildren.length > 0 && this._isErrorState()) ? 'error' : 'hint';
-  }
-
   /**
    * Ensure that there is only one placeholder (either `input` attribute or child element with the
    * `md-placeholder` attribute.