diff --git a/src/lib/form-field/form-field-control.ts b/src/lib/form-field/form-field-control.ts index 811858101628..8bbf3b6cf12c 100644 --- a/src/lib/form-field/form-field-control.ts +++ b/src/lib/form-field/form-field-control.ts @@ -48,6 +48,13 @@ export abstract class MdFormFieldControl { /** 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; diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts index 3d8e22556b10..f2b4e9b2a14a 100644 --- a/src/lib/form-field/form-field.ts +++ b/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(() => { diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index 93d19e688517..16d7c1f7f9ce 100644 --- a/src/lib/input/input.ts +++ b/src/lib/input/input.ts @@ -92,6 +92,9 @@ export class MdInput implements MdFormFieldControl, OnChanges, OnDestroy, D */ stateChanges = new Subject(); + /** 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; } diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index 88545b130360..f0e708bcd88e 100644 --- a/src/lib/select/select.scss +++ b/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; +} diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 37438eafe84b..5eb3caea8707 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -284,8 +284,12 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On */ stateChanges = new Subject(); + /** 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;