Skip to content

Commit

Permalink
add a class to form-field depending on the control type for easy styling
Browse files Browse the repository at this point in the history
  • Loading branch information
mmalerba committed Aug 17, 2017
1 parent 5dab0ee commit cdaf948
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 0 deletions.
7 changes: 7 additions & 0 deletions src/lib/form-field/form-field-control.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
4 changes: 4 additions & 0 deletions src/lib/form-field/form-field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
3 changes: 3 additions & 0 deletions src/lib/input/input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down
4 changes: 4 additions & 0 deletions src/lib/select/select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
4 changes: 4 additions & 0 deletions src/lib/select/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down

0 comments on commit cdaf948

Please sign in to comment.