add a class to form-field depending on the control type for easy styling

Author: mmalerba

src/lib/form-field/form-field-control.ts

@@ -48,6 +48,13 @@ export abstract class MdFormFieldControl<T> {
   /** Whether the control is in an error state. */
   readonly errorState: boolean;
 
+  /**
+   * An optional name for the control type that can be used to distinguish `md-form-field` elements
+   * based on their control type. The form field will add a class,
+   * `mat-form-field-type-{{controlType}}` to its root element.
+   */
+  readonly controlType?: string;
+
   /** Sets the list of element IDs that currently describe this control. */
   abstract setDescribedByIds(ids: string[]): void;
 

src/lib/form-field/form-field.ts

@@ -159,6 +159,10 @@ export class MdFormField implements AfterViewInit, AfterContentInit, AfterConten
 
   ngAfterContentInit() {
     this._validateControlChild();
+    if (this._control.controlType) {
+      this._elementRef.nativeElement.classList.add(
+          `mat-form-field-type-${this._control.controlType}`);
+    }
 
     // Subscribe to changes in the child control state in order to update the form field UI.
     startWith.call(this._control.stateChanges, null).subscribe(() => {

src/lib/input/input.ts

@@ -92,6 +92,9 @@ export class MdInput implements MdFormFieldControl<any>, OnChanges, OnDestroy, D
    */
   stateChanges = new Subject<void>();
 
+  /** A name for this control that can be used by `md-form-field`. */
+  controlType = 'mat-input';
+
   /** Whether the element is disabled. */
   @Input()
   get disabled() { return this.ngControl ? this.ngControl.disabled : this._disabled; }

src/lib/select/select.scss

@@ -81,3 +81,7 @@ $mat-select-item-height: 3em !default;
     height: $mat-select-item-height;
   }
 }
+
+.mat-form-field-type-mat-select .mat-form-field-flex {
+  cursor: pointer;
+}

src/lib/select/select.ts

@@ -284,8 +284,12 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
    */
   stateChanges = new Subject<void>();
 
+  /** Whether the select is focused. */
   focused = false;
 
+  /** A name for this control that can be used by `md-form-field`. */
+  controlType = 'mat-select';
+
   /** Trigger that opens the select. */
   @ViewChild('trigger') trigger: ElementRef;