feat(input): add directive for displaying error messages (#3560)

* feat(input): add directive for displayed error messages

Adds the `md-error` directive that can be utilised to display validation errors to the user. Example:

```
<md-input-container>
  <input mdInput placeholder="email" [formControl]="emailFormControl">
  <md-error *ngIf="emailFormControl.errors.required">This field is required</md-error>
  <md-error *ngIf="emailFormControl.errors.pattern">
    Please enter a valid email address
  </md-error>
</md-input-container>
```

The `md-input-container` behavior is as follows:
* If there is an error and the user interacted with the input, the errors will be shown.
* If there is an error and the user submitted the a form that wraps the input, the errors will be shown.
* If there are errors to be shown on an input container that has `md-hint`-s, the hints will be hidden.
* If an input with hints and errors becomes valid, the hint won't be displayed anymore.

**Note:** At the moment, all hints will be hidden when an error is shown. This might not be intended for some cases (e.g. with a character counter). It might make sense to only hide the one in the `start` slot, but this could be addressed separately.

* chore: lint and aot errors

* fix: address feedback

* fix: address more feedback

* chore: use FormGroup properly

* refactor: switch back to showing hints when valid

* errror

Author: crisbeto

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

@@ -51,6 +51,51 @@
   </md-card-content>
 </md-card>
 
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Error messages</md-toolbar>
+  <md-card-content>
+    <h4>Regular</h4>
+
+    <p>
+      <md-input-container>
+        <input mdInput placeholder="example" [(ngModel)]="errorMessageExample1" required>
+        <md-error>This field is required</md-error>
+      </md-input-container>
+
+      <md-input-container>
+        <input mdInput placeholder="email" [formControl]="emailFormControl">
+        <md-error *ngIf="emailFormControl.hasError('required')">
+          This field is required
+        </md-error>
+        <md-error *ngIf="emailFormControl.hasError('pattern')">
+          Please enter a valid email address
+        </md-error>
+      </md-input-container>
+    </p>
+
+    <h4>With hint</h4>
+
+    <md-input-container>
+      <input mdInput placeholder="example" [(ngModel)]="errorMessageExample2" required>
+      <md-error>This field is required</md-error>
+      <md-hint>Please type something here</md-hint>
+    </md-input-container>
+
+
+    <form novalidate>
+      <h4>Inside a form</h4>
+
+      <md-input-container>
+        <input mdInput name="example" placeholder="example"
+          [(ngModel)]="errorMessageExample3" required>
+        <md-error>This field is required</md-error>
+      </md-input-container>
+
+      <button color="primary" md-raised-button>Submit</button>
+    </form>
+  </md-card-content>
+</md-card>
+
 <md-card class="demo-card demo-basic">
   <md-toolbar color="primary">Prefix + Suffix</md-toolbar>
   <md-card-content>

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

@@ -4,6 +4,8 @@ import {FormControl, Validators} from '@angular/forms';
 
 let max = 5;
 
+const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
 @Component({
   moduleId: module.id,
   selector: 'input-demo',
@@ -17,6 +19,9 @@ export class InputDemo {
   ctrlDisabled = false;
 
   name: string;
+  errorMessageExample1: string;
+  errorMessageExample2: string;
+  errorMessageExample3: string;
   items: any[] = [
     { value: 10 },
     { value: 20 },
@@ -26,6 +31,7 @@ export class InputDemo {
   ];
   rows = 8;
   formControl = new FormControl('hello', Validators.required);
+  emailFormControl = new FormControl('', [Validators.required, Validators.pattern(EMAIL_REGEX)]);
   model = 'hello';
 
   addABunch(n: number) {

src/lib/autocomplete/autocomplete.spec.ts

@@ -1,6 +1,7 @@
 import {TestBed, async, fakeAsync, tick, ComponentFixture} from '@angular/core/testing';
 import {Component, OnDestroy, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MdAutocompleteModule, MdAutocompleteTrigger} from './index';
 import {OverlayContainer} from '../core/overlay/overlay-container';
 import {MdInputModule} from '../input/index';
@@ -27,7 +28,11 @@ describe('MdAutocomplete', () => {
     dir = 'ltr';
     TestBed.configureTestingModule({
       imports: [
-          MdAutocompleteModule.forRoot(), MdInputModule.forRoot(), FormsModule, ReactiveFormsModule
+        MdAutocompleteModule.forRoot(),
+        MdInputModule.forRoot(),
+        FormsModule,
+        ReactiveFormsModule,
+        NoopAnimationsModule
       ],
       declarations: [
         SimpleAutocomplete,

src/lib/core/compatibility/compatibility.ts

@@ -70,7 +70,8 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-spinner,
   mat-tab,
   mat-tab-group,
-  mat-toolbar`;
+  mat-toolbar,
+  mat-error`;
 
 /** Selector that matches all elements that may have style collisions with AngularJS Material. */
 export const MD_ELEMENTS_SELECTOR = `
@@ -130,7 +131,8 @@ export const MD_ELEMENTS_SELECTOR = `
   md-spinner,
   md-tab,
   md-tab-group,
-  md-toolbar`;
+  md-toolbar,
+  md-error`;
 
 /** Directive that enforces that the `mat-` prefix cannot be used. */
 @Directive({selector: MAT_ELEMENTS_SELECTOR})

src/lib/input/_input-theme.scss

@@ -8,12 +8,12 @@
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
-  
+
   // Placeholder colors. Required is used for the `*` star shown in the placeholder.
   $input-placeholder-color: mat-color($foreground, hint-text);
   $input-floating-placeholder-color: mat-color($primary);
   $input-required-placeholder-color: mat-color($accent);
-  
+
   // Underline colors.
   $input-underline-color: mat-color($foreground, divider);
   $input-underline-color-accent: mat-color($accent);
@@ -64,7 +64,10 @@
     }
   }
 
-  .mat-input-container.ng-invalid.ng-touched:not(.mat-focused) {
+  // Styling for the error state of the input container. Note that while the same can be
+  // achieved with the ng-* classes, we use this approach in order to ensure that the same
+  // logic is used to style the error state and to show the error messages.
+  .mat-input-invalid {
     .mat-input-placeholder,
     .mat-placeholder-required {
       color: $input-underline-color-warn;
@@ -73,5 +76,13 @@
     .mat-input-underline {
       border-color: $input-underline-color-warn;
     }
+
+    .mat-input-ripple {
+      background-color: $input-underline-color-warn;
+    }
+  }
+
+  .mat-input-error {
+    color: $input-underline-color-warn;
   }
 }

src/lib/input/index.ts

@@ -1,5 +1,11 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
-import {MdPlaceholder, MdInputContainer, MdHint, MdInputDirective} from './input-container';
+import {
+  MdPlaceholder,
+  MdInputContainer,
+  MdHint,
+  MdInputDirective,
+  MdErrorDirective,
+} from './input-container';
 import {MdTextareaAutosize} from './autosize';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
@@ -12,7 +18,8 @@ import {PlatformModule} from '../core/platform/index';
     MdInputContainer,
     MdHint,
     MdTextareaAutosize,
-    MdInputDirective
+    MdInputDirective,
+    MdErrorDirective
   ],
   imports: [
     CommonModule,
@@ -24,7 +31,8 @@ import {PlatformModule} from '../core/platform/index';
     MdInputContainer,
     MdHint,
     MdTextareaAutosize,
-    MdInputDirective
+    MdInputDirective,
+    MdErrorDirective
   ],
 })
 export class MdInputModule {

src/lib/input/input-container.html

@@ -36,6 +36,15 @@
           [class.mat-warn]="dividerColor == 'warn'"></span>
   </div>
 
-  <div *ngIf="hintLabel != ''" [attr.id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
-  <ng-content select="md-hint, mat-hint"></ng-content>
+  <div class="mat-input-subscript-wrapper" [ngSwitch]="_getDisplayedMessages()">
+    <div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">
+      <ng-content select="md-error, mat-error"></ng-content>
+    </div>
+
+    <div class="mat-input-hint-wrapper" *ngSwitchCase="'hint'"
+      [@transitionMessages]="_subscriptAnimationState">
+      <div *ngIf="hintLabel" [id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
+      <ng-content select="md-hint, mat-hint"></ng-content>
+    </div>
+  </div>
 </div>

src/lib/input/input-container.scss

@@ -4,6 +4,7 @@
 
 
 $mat-input-floating-placeholder-scale-factor: 0.75 !default;
+$mat-input-wrapper-spacing: 1em !default;
 
 // Gradient for showing the dashed line when the input is disabled.
 $mat-input-underline-disabled-background-image:
@@ -41,7 +42,7 @@ $mat-input-underline-disabled-background-image:
 // Global wrapper. We need to apply margin to the element for spacing, but
 // cannot apply it to the host element directly.
 .mat-input-wrapper {
-  margin: 1em 0;
+  margin: $mat-input-wrapper-spacing 0;
   // Account for the underline which has 4px of margin + 2px of border.
   padding-bottom: 6px;
 }
@@ -219,29 +220,57 @@ $mat-input-underline-disabled-background-image:
   }
 }
 
-// The hint is shown below the underline. There can be more than one; one at the start
-// and one at the end.
-.mat-hint {
-  display: block;
+// Wrapper for the hints and error messages. Provides positioning and text size.
+// Note that we're using `top` in order to allow for stacked children to flow downwards.
+.mat-input-subscript-wrapper {
   position: absolute;
   font-size: 75%;
-  bottom: 0;
+  top: 100%;
+  width: 100%;
+  margin-top: -$mat-input-wrapper-spacing;
+  overflow: hidden; // prevents multi-line errors from overlapping the input
+}
+
+// Clears the floats on the hints. This is necessary for the hint animation to work.
+.mat-input-hint-wrapper {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
 
+// The hint is shown below the underline. There can be
+// more than one; one at the start and one at the end.
+.mat-hint {
+  display: block;
+  float: left;
+
+  // We use floats here, as opposed to flexbox, in order to make it
+  // easier to reverse their location in rtl and to ensure that they're
+  // aligned properly in some cases (e.g. when there is only an `end` hint).
   &.mat-right {
-    right: 0;
+    float: right;
   }
 
   [dir='rtl'] & {
-    right: 0;
-    left: auto;
+    float: right;
 
     &.mat-right {
-      right: auto;
-      left: 0;
+      float: left;
     }
   }
 }
 
+// Single error message displayed beneath the input.
+.mat-input-error {
+  display: block;
+}
+
 .mat-input-prefix, .mat-input-suffix {
   // Prevents the prefix and suffix from stretching together with the container.
   width: 0.1px;