fix: address more feedback

Author: crisbeto

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

@@ -64,10 +64,10 @@ <h4>Regular</h4>
 
       <md-input-container>
         <input mdInput placeholder="email" [formControl]="emailFormControl">
-        <md-error *ngIf="emailFormControl.errors ? emailFormControl.errors['required'] : false">
+        <md-error *ngIf="emailFormControl.hasError('required')">
           This field is required
         </md-error>
-        <md-error *ngIf="emailFormControl.errors ? emailFormControl.errors['pattern'] : false">
+        <md-error *ngIf="emailFormControl.hasError('pattern')">
           Please enter a valid email address
         </md-error>
       </md-input-container>

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

@@ -64,6 +64,9 @@
     }
   }
 
+  // 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 {

src/lib/input/input-container.html

@@ -37,12 +37,12 @@
   </div>
 
   <div class="mat-input-hint-wrapper" [ngSwitch]="_getDisplayedMessages()">
-    <div *ngSwitchCase="'error'" [@transitionMessages]="_messageAnimationState">
+    <div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">
       <ng-content select="md-error, mat-error"></ng-content>
     </div>
 
-    <div *ngSwitchCase="'hint'" [@transitionMessages]="_messageAnimationState">
-      <div *ngIf="hintLabel != ''" [attr.id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
+    <div *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>

src/lib/input/input-container.scss

@@ -237,6 +237,9 @@ $mat-input-underline-disabled-background-image:
   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 {
     float: right;
   }

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

@@ -1,6 +1,14 @@
 import {async, TestBed, inject, ComponentFixture} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
-import {FormsModule, ReactiveFormsModule, FormControl, NgForm, Validators} from '@angular/forms';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  FormControl,
+  NgForm,
+  Validators,
+  FormGroupDirective,
+  FormGroup,
+} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MdInputModule} from './index';
@@ -54,7 +62,8 @@ describe('MdInputContainer', function () {
         MdInputContainerMultipleHintTestController,
         MdInputContainerMultipleHintMixedTestController,
         MdInputContainerWithDynamicPlaceholder,
-        MdInputContainerWithErrorMessages
+        MdInputContainerWithFormErrorMessages,
+        MdInputContainerWithFormGroupErrorMessages
       ],
     });
 
@@ -556,19 +565,19 @@ describe('MdInputContainer', function () {
   });
 
   describe('error messages', () => {
-    let fixture: ComponentFixture<MdInputContainerWithErrorMessages>;
-    let testComponent: MdInputContainerWithErrorMessages;
+    let fixture: ComponentFixture<MdInputContainerWithFormErrorMessages>;
+    let testComponent: MdInputContainerWithFormErrorMessages;
     let containerEl: HTMLElement;
 
     beforeEach(() => {
-      fixture = TestBed.createComponent(MdInputContainerWithErrorMessages);
+      fixture = TestBed.createComponent(MdInputContainerWithFormErrorMessages);
       fixture.detectChanges();
       testComponent = fixture.componentInstance;
       containerEl = fixture.debugElement.query(By.css('md-input-container')).nativeElement;
     });
 
     it('should not show any errors if the user has not interacted', () => {
-      expect(testComponent.formControl.pristine).toBe(true, 'Expected untouched form control');
+      expect(testComponent.formControl.untouched).toBe(true, 'Expected untouched form control');
       expect(containerEl.querySelectorAll('md-error').length).toBe(0, 'Expected no error messages');
     });
 
@@ -604,6 +613,34 @@ describe('MdInputContainer', function () {
       });
     }));
 
+    it('should display an error message when the parent form group is submitted', async(() => {
+      fixture.destroy();
+
+      let groupFixture = TestBed.createComponent(MdInputContainerWithFormGroupErrorMessages);
+      let component: MdInputContainerWithFormGroupErrorMessages;
+
+      groupFixture.detectChanges();
+      component = groupFixture.componentInstance;
+      containerEl = groupFixture.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');
+      expect(component.formGroupDirective.submitted)
+          .toBe(false, 'Expected form not to have been submitted');
+
+      dispatchFakeEvent(groupFixture.debugElement.query(By.css('form')).nativeElement, 'submit');
+      groupFixture.detectChanges();
+
+      groupFixture.whenStable().then(() => {
+        expect(component.formGroupDirective.submitted)
+            .toBe(true, 'Expected form to have been submitted');
+        expect(containerEl.classList)
+            .toContain('mat-input-invalid', 'Expected container to have the invalid CSS class.');
+        expect(containerEl.querySelectorAll('md-error').length)
+            .toBe(1, 'Expected one error message to have been rendered.');
+      });
+    }));
+
     it('should hide the error messages once the input becomes valid', async(() => {
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
@@ -909,8 +946,27 @@ class MdInputContainerMissingMdInputTestController {}
     </form>
   `
 })
-class MdInputContainerWithErrorMessages {
+class MdInputContainerWithFormErrorMessages {
   @ViewChild('form') form: NgForm;
   formControl = new FormControl('', Validators.required);
   renderError = true;
 }
+
+
+@Component({
+  template: `
+    <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" novalidate>
+      <md-input-container>
+        <input mdInput [formControl]="formControl">
+        <md-hint>Please type something</md-hint>
+        <md-error>This field is required</md-error>
+      </md-input-container>
+    </form>
+  `
+})
+class MdInputContainerWithFormGroupErrorMessages {
+  @ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;
+  onSubmit() { }
+  formControl = new FormControl('', Validators.required);
+  formGroup = new FormGroup({ name: this.formControl });
+}

src/lib/input/input-container.ts

@@ -24,7 +24,7 @@ import {
   trigger,
 } from '@angular/animations';
 import {coerceBooleanProperty} from '../core';
-import {NgControl, NgForm} from '@angular/forms';
+import {NgControl, NgForm, FormGroupDirective} from '@angular/forms';
 import {getSupportedInputTypes} from '../core/platform/features';
 import {
   MdInputContainerDuplicatedHintError,
@@ -257,7 +257,7 @@ export class MdInputDirective {
       state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
       transition('void => enter', [
         style({ opacity: 0, transform: 'translateY(-100%)' }),
-        animate('300ms')
+        animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')
       ])
     ])
   ],
@@ -292,7 +292,7 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit {
   get _canPlaceholderFloat() { return this._floatPlaceholder !== 'never'; }
 
   /** State of the md-hint and md-error animations. */
-  _messageAnimationState: string = '';
+  _subscriptAnimationState: string = '';
 
   /** Text for the input hint. */
   @Input()
@@ -324,7 +324,8 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit {
 
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
-    @Optional() private _parentForm: NgForm) { }
+    @Optional() private _parentForm: NgForm,
+    @Optional() private _parentFormGroup: FormGroupDirective) { }
 
   ngAfterContentInit() {
     if (!this._mdInputChild) {
@@ -341,7 +342,7 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit {
 
   ngAfterViewInit() {
     // Avoid animations on load.
-    this._messageAnimationState = 'enter';
+    this._subscriptAnimationState = 'enter';
     this._changeDetectorRef.detectChanges();
   }
 
@@ -360,11 +361,12 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit {
   /** Whether the input container is in an error state. */
   _isErrorState(): boolean {
     const control = this._mdInputChild._ngControl;
-    const isInvalid = control ? control.invalid : false;
-    const isTouched = control ? control.touched : false;
-    const isSubmitted = this._parentForm ? this._parentForm.submitted : false;
+    const isInvalid = control && control.invalid;
+    const isTouched = control && control.touched;
+    const isSubmitted = (this._parentFormGroup && this._parentFormGroup.submitted) ||
+        (this._parentForm && this._parentForm.submitted);
 
-    return isInvalid && (isTouched || isSubmitted);
+    return !!(isInvalid && (isTouched || isSubmitted));
   }
 
   /** Determines whether to display hints, errors or no messages at all. */