rename input-container to form-field

Author: mmalerba

src/demo-app/datepicker/datepicker-demo.html

@@ -9,20 +9,20 @@ <h2>Options</h2>
   <md-input-container>
     <input mdInput [mdDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date">
     <md-datepicker-toggle mdSuffix [for]="minDatePicker"></md-datepicker-toggle>
+    <md-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
   </md-input-container>
-  <md-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
   <md-input-container>
     <input mdInput [mdDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date">
     <md-datepicker-toggle mdSuffix [for]="maxDatePicker"></md-datepicker-toggle>
+    <md-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
   </md-input-container>
-  <md-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
 </p>
 <p>
   <md-input-container>
     <input mdInput [mdDatepicker]="startAtPicker" [(ngModel)]="startAt" placeholder="Start at date">
     <md-datepicker-toggle mdSuffix [for]="startAtPicker"></md-datepicker-toggle>
+    <md-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
   </md-input-container>
-  <md-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
 </p>
 
 <h2>Result</h2>
@@ -40,20 +40,20 @@ <h2>Result</h2>
            placeholder="Pick a date"
            (dateInput)="onDateInput($event)"
            (dateChange)="onDateChange($event)">
+    <md-datepicker
+        #resultPicker
+        [touchUi]="touch"
+        [disabled]="datepickerDisabled"
+        [startAt]="startAt"
+        [startView]="yearView ? 'year' : 'month'">
+    </md-datepicker>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerParse')">
       "{{resultPickerModel.getError('mdDatepickerParse').text}}" is not a valid date!
     </md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMin')">Too early!</md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMax')">Too late!</md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerFilter')">Date unavailable!</md-error>
   </md-input-container>
-  <md-datepicker
-      #resultPicker
-      [touchUi]="touch"
-      [disabled]="datepickerDisabled"
-      [startAt]="startAt"
-      [startView]="yearView ? 'year' : 'month'">
-  </md-datepicker>
 </p>
 <p>Last input: {{lastDateInput}}</p>
 <p>Last change: {{lastDateChange}}</p>
@@ -83,9 +83,9 @@ <h2>Input disabled datepicker</h2>
     <input mdInput [mdDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
            [mdDatepickerFilter]="filterOdd ? dateFilter : null" [disabled]="true"
            placeholder="Input disabled">
-  </md-input-container>
-  <md-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
+    <md-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
                    [startView]="yearView ? 'year' : 'month'"></md-datepicker>
+  </md-input-container>
 </p>
 
 <h2>Input disabled, datepicker popup enabled</h2>
@@ -95,7 +95,7 @@ <h2>Input disabled, datepicker popup enabled</h2>
     <input mdInput disabled [mdDatepicker]="datePicker2" [(ngModel)]="date" [min]="minDate"
            [max]="maxDate" [mdDatepickerFilter]="filterOdd ? dateFilter : null"
            placeholder="Input disabled, datepicker enabled">
+    <md-datepicker #datePicker2 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
+                   [startView]="yearView ? 'year' : 'month'"></md-datepicker>
   </md-input-container>
-  <md-datepicker #datePicker2 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
-                 [startView]="yearView ? 'year' : 'month'"></md-datepicker>
 </p>

src/lib/autocomplete/autocomplete-trigger.ts

@@ -40,7 +40,7 @@ import {Observable} from 'rxjs/Observable';
 import {MdOptionSelectionChange, MdOption} from '../core/option/option';
 import {ENTER, UP_ARROW, DOWN_ARROW, ESCAPE} from '../core/keyboard/keycodes';
 import {Directionality} from '../core/bidi/index';
-import {MdInputContainer, MdInputDirective} from '../input/input-container';
+import {MdFormField, MdInput} from '../input/input-container';
 import {Subscription} from 'rxjs/Subscription';
 import {merge} from 'rxjs/observable/merge';
 import {fromEvent} from 'rxjs/observable/fromEvent';
@@ -153,7 +153,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
               private _changeDetectorRef: ChangeDetectorRef,
               @Inject(MD_AUTOCOMPLETE_SCROLL_STRATEGY) private _scrollStrategy,
               @Optional() private _dir: Directionality,
-              @Optional() @Host() private _inputContainer: MdInputContainer,
+              @Optional() @Host() private _inputContainer: MdFormField,
               @Optional() @Inject(DOCUMENT) private _document: any) {}
 
   ngOnDestroy() {
@@ -411,8 +411,8 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     // If it's used in a Material container, we should set it through
     // the property so it can go through the change detection.
     if (this._inputContainer &&
-        this._inputContainer._textFieldControl instanceof MdInputDirective) {
-      this._inputContainer._textFieldControl.value = inputValue;
+        this._inputContainer._control instanceof MdInput) {
+      this._inputContainer._control.value = inputValue;
     } else {
       this._element.nativeElement.value = inputValue;
     }

src/lib/autocomplete/autocomplete.spec.ts

@@ -23,7 +23,7 @@ import {Directionality, Direction} from '../core/bidi/index';
 import {Subscription} from 'rxjs/Subscription';
 import {ENTER, DOWN_ARROW, SPACE, UP_ARROW, ESCAPE} from '../core/keyboard/keycodes';
 import {MdOption} from '../core/option/option';
-import {MdInputContainer} from '../input/input-container';
+import {MdFormField} from '../input/input-container';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {createKeyboardEvent, dispatchFakeEvent, typeInElement} from '@angular/cdk/testing';
@@ -1417,7 +1417,7 @@ class SimpleAutocomplete implements OnDestroy {
 
   @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;
   @ViewChild(MdAutocomplete) panel: MdAutocomplete;
-  @ViewChild(MdInputContainer) inputContainer: MdInputContainer;
+  @ViewChild(MdFormField) inputContainer: MdFormField;
   @ViewChildren(MdOption) options: QueryList<MdOption>;
 
   states = [

src/lib/datepicker/datepicker-input.ts

@@ -31,7 +31,7 @@ import {
   Validators
 } from '@angular/forms';
 import {Subscription} from 'rxjs/Subscription';
-import {MdInputContainer} from '../input/input-container';
+import {MdFormField} from '../input/input-container';
 import {DOWN_ARROW} from '../core/keyboard/keycodes';
 import {DateAdapter} from '../core/datetime/index';
 import {createMissingDateImplError} from './datepicker-errors';
@@ -212,7 +212,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
       private _renderer: Renderer2,
       @Optional() private _dateAdapter: DateAdapter<D>,
       @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats,
-      @Optional() private _mdInputContainer: MdInputContainer) {
+      @Optional() private _mdInputContainer: MdFormField) {
     if (!this._dateAdapter) {
       throw createMissingDateImplError('DateAdapter');
     }

src/lib/input/index.ts

@@ -8,10 +8,10 @@
 
 import {NgModule} from '@angular/core';
 import {
-  MdErrorDirective,
+  MdError,
   MdHint,
-  MdInputContainer,
-  MdInputDirective,
+  MdFormField,
+  MdInput,
   MdPlaceholder,
   MdPrefix,
   MdSuffix
@@ -23,10 +23,10 @@ import {PlatformModule} from '../core/platform/index';
 
 @NgModule({
   declarations: [
-    MdErrorDirective,
+    MdError,
     MdHint,
-    MdInputContainer,
-    MdInputDirective,
+    MdFormField,
+    MdInput,
     MdPlaceholder,
     MdPrefix,
     MdSuffix,
@@ -37,10 +37,10 @@ import {PlatformModule} from '../core/platform/index';
     PlatformModule,
   ],
   exports: [
-    MdErrorDirective,
+    MdError,
     MdHint,
-    MdInputContainer,
-    MdInputDirective,
+    MdFormField,
+    MdInput,
     MdPlaceholder,
     MdPrefix,
     MdSuffix,

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

@@ -7,22 +7,22 @@
  */
 
 /** @docs-private */
-export function getMdInputContainerPlaceholderConflictError(): Error {
+export function getMdFormFieldPlaceholderConflictError(): Error {
   return Error('Placeholder attribute and child element were both specified.');
 }
 
 /** @docs-private */
-export function getMdInputContainerUnsupportedTypeError(type: string): Error {
-  return Error(`Input type "${type}" isn't supported by md-input-container.`);
+export function getMdInputUnsupportedTypeError(type: string): Error {
+  return Error(`Input type "${type}" isn't supported by mdInput.`);
 }
 
 /** @docs-private */
-export function getMdInputContainerDuplicatedHintError(align: string): Error {
+export function getMdFormFieldDuplicatedHintError(align: string): Error {
   return Error(`A hint was already declared for 'align="${align}"'.`);
 }
 
 /** @docs-private */
-export function getMdInputContainerMissingMdInputError(): Error {
-  return Error('md-input-container must contain an mdInput directive. ' +
-                   'Did you forget to add mdInput to the native input or textarea element?');
+export function getMdFormFieldMissingControlError(): Error {
+  return Error('md-form-field must contain a MdFormFieldControl. ' +
+               'Did you forget to add mdInput to the native input or textarea element?');
 }

src/lib/input/input-container.html

@@ -5,22 +5,22 @@
     </div>
 
     <div class="mat-input-infix">
-      <ng-content selector="input, textarea"></ng-content>
+      <ng-content></ng-content>
 
       <span class="mat-input-placeholder-wrapper">
         <label class="mat-input-placeholder"
-               [attr.for]="_textFieldControl.getId()"
-               [class.mat-empty]="_textFieldControl.isEmpty() && !_shouldAlwaysFloat"
+               [attr.for]="_control.getId()"
+               [class.mat-empty]="_control.isEmpty() && !_shouldAlwaysFloat"
                [class.mat-float]="_canPlaceholderFloat"
                [class.mat-accent]="color == 'accent'"
                [class.mat-warn]="color == 'warn'"
                *ngIf="_hasPlaceholder()">
           <ng-content select="md-placeholder, mat-placeholder"></ng-content>
-          {{_textFieldControl.getPlaceholder()}}
+          {{_control.getPlaceholder()}}
           <span
             class="mat-placeholder-required"
             aria-hidden="true"
-            *ngIf="!hideRequiredMarker && _textFieldControl.isRequired()">*</span>
+            *ngIf="!hideRequiredMarker && _control.isRequired()">*</span>
         </label>
       </span>
     </div>
@@ -31,7 +31,7 @@
   </div>
 
   <div class="mat-input-underline" #underline
-       [class.mat-disabled]="_textFieldControl.isDisabled()">
+       [class.mat-disabled]="_control.isDisabled()">
     <span class="mat-input-ripple"
           [class.mat-accent]="color == 'accent'"
           [class.mat-warn]="color == 'warn'"></span>

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

@@ -12,14 +12,14 @@ import {
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MdInputModule} from './index';
-import {MdInputContainer, MdInputDirective} from './input-container';
+import {MdFormField, MdInput} from './input-container';
 import {Platform} from '../core/platform/platform';
 import {PlatformModule} from '../core/platform/index';
 import {wrappedErrorMessage, dispatchFakeEvent} from '@angular/cdk/testing';
 import {
-  getMdInputContainerDuplicatedHintError,
-  getMdInputContainerMissingMdInputError,
-  getMdInputContainerPlaceholderConflictError
+  getMdFormFieldDuplicatedHintError,
+  getMdFormFieldMissingControlError,
+  getMdFormFieldPlaceholderConflictError
 } 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';
@@ -73,8 +73,8 @@ describe('MdInputContainer without forms', function () {
     let fixture = TestBed.createComponent(MdInputContainerWithId);
     fixture.detectChanges();
 
-    let inputContainer = fixture.debugElement.query(By.directive(MdInputContainer))
-        .componentInstance as MdInputContainer;
+    let inputContainer = fixture.debugElement.query(By.directive(MdFormField))
+        .componentInstance as MdFormField;
     expect(inputContainer.floatPlaceholder).toBe('auto',
         'Expected MdInputContainer to set floatingLabel to auto by default.');
   });
@@ -96,8 +96,8 @@ describe('MdInputContainer without forms', function () {
     let fixture = TestBed.createComponent(MdInputContainerWithId);
     fixture.detectChanges();
 
-    let inputContainer = fixture.debugElement.query(By.directive(MdInputContainer))
-        .componentInstance as MdInputContainer;
+    let inputContainer = fixture.debugElement.query(By.directive(MdFormField))
+        .componentInstance as MdFormField;
     expect(inputContainer.floatPlaceholder).toBe('always',
         'Expected MdInputContainer to set floatingLabel to always from global option.');
   });
@@ -236,40 +236,40 @@ describe('MdInputContainer without forms', function () {
     let fixture = TestBed.createComponent(MdInputContainerInvalidHintTestController);
 
     expect(() => fixture.detectChanges()).toThrowError(
-        wrappedErrorMessage(getMdInputContainerDuplicatedHintError('start')));
+        wrappedErrorMessage(getMdFormFieldDuplicatedHintError('start')));
   });
 
   it('validates there\'s only one hint label per side (attribute)', () => {
     let fixture = TestBed.createComponent(MdInputContainerInvalidHint2TestController);
 
     expect(() => fixture.detectChanges()).toThrowError(
-        wrappedErrorMessage(getMdInputContainerDuplicatedHintError('start')));
+        wrappedErrorMessage(getMdFormFieldDuplicatedHintError('start')));
   });
 
   it('validates there\'s only one placeholder', () => {
     let fixture = TestBed.createComponent(MdInputContainerInvalidPlaceholderTestController);
 
     expect(() => fixture.detectChanges()).toThrowError(
-        wrappedErrorMessage(getMdInputContainerPlaceholderConflictError()));
+        wrappedErrorMessage(getMdFormFieldPlaceholderConflictError()));
   });
 
   it('validates that mdInput child is present', () => {
     let fixture = TestBed.createComponent(MdInputContainerMissingMdInputTestController);
 
     expect(() => fixture.detectChanges()).toThrowError(
-        wrappedErrorMessage(getMdInputContainerMissingMdInputError()));
+        wrappedErrorMessage(getMdFormFieldMissingControlError()));
   });
 
   it('validates that mdInput child is present after initialization', async(() => {
     let fixture = TestBed.createComponent(MdInputContainerWithNgIf);
 
     expect(() => fixture.detectChanges()).not.toThrowError(
-        wrappedErrorMessage(getMdInputContainerMissingMdInputError()));
+        wrappedErrorMessage(getMdFormFieldMissingControlError()));
 
     fixture.componentInstance.renderInput = false;
 
     expect(() => fixture.detectChanges()).toThrowError(
-        wrappedErrorMessage(getMdInputContainerMissingMdInputError()));
+        wrappedErrorMessage(getMdFormFieldMissingControlError()));
   }));
 
   it('validates the type', () => {
@@ -580,8 +580,8 @@ describe('MdInputContainer without forms', function () {
 
     fixture.detectChanges();
 
-    const inputContainer = fixture.debugElement.query(By.directive(MdInputContainer));
-    const containerInstance = inputContainer.componentInstance as MdInputContainer;
+    const inputContainer = fixture.debugElement.query(By.directive(MdFormField));
+    const containerInstance = inputContainer.componentInstance as MdFormField;
     const placeholder = inputContainer.nativeElement.querySelector('.mat-input-placeholder');
 
     expect(containerInstance.floatPlaceholder).toBe('auto');
@@ -638,8 +638,8 @@ describe('MdInputContainer without forms', function () {
     let fixture = TestBed.createComponent(MdInputContainerTextTestController);
     fixture.detectChanges();
 
-    let input = fixture.debugElement.query(By.directive(MdInputDirective))
-      .injector.get<MdInputDirective>(MdInputDirective);
+    let input = fixture.debugElement.query(By.directive(MdInput))
+      .injector.get<MdInput>(MdInput);
     let container = fixture.debugElement.query(By.css('md-input-container')).nativeElement;
 
     // Call the focus handler directly to avoid flakyness where
@@ -944,8 +944,8 @@ describe('MdInputContainer with forms', () => {
     let fixture = TestBed.createComponent(MdInputContainerWithFormControl);
     fixture.detectChanges();
 
-    let input = fixture.debugElement.query(By.directive(MdInputDirective))
-      .injector.get<MdInputDirective>(MdInputDirective);
+    let input = fixture.debugElement.query(By.directive(MdInput))
+      .injector.get<MdInput>(MdInput);
 
     expect(input.value).toBeFalsy();