From 48b3cc9d2c921832046fd9d8cdb6adc42d27bd8e Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Mon, 7 Aug 2017 23:07:39 -0700 Subject: [PATCH] address comments --- src/lib/autocomplete/autocomplete-trigger.ts | 24 +++++++++----------- src/lib/form-field/form-field.ts | 8 +++++-- src/lib/input/index.ts | 5 ++-- src/lib/input/input.spec.ts | 4 ++-- src/lib/public_api.ts | 3 +++ 5 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index b29972a920e5..234927443da4 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -41,7 +41,6 @@ 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 {MdFormField} from '../form-field/index'; -import {MdInput} from '../input/input'; import {Subscription} from 'rxjs/Subscription'; import {merge} from 'rxjs/observable/merge'; import {fromEvent} from 'rxjs/observable/fromEvent'; @@ -154,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: MdFormField, + @Optional() @Host() private _formField: MdFormField, @Optional() @Inject(DOCUMENT) private _document: any) {} ngOnDestroy() { @@ -247,8 +246,8 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { fromEvent(this._document, 'touchend') )).call(filter, (event: MouseEvent | TouchEvent) => { const clickTarget = event.target as HTMLElement; - const inputContainer = this._inputContainer ? - this._inputContainer._elementRef.nativeElement : null; + const inputContainer = this._formField ? + this._formField._elementRef.nativeElement : null; return this._panelOpen && clickTarget !== this._element.nativeElement && @@ -330,8 +329,8 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { * This method manually floats the placeholder until the panel can be closed. */ private _floatPlaceholder(): void { - if (this._inputContainer && this._inputContainer.floatPlaceholder === 'auto') { - this._inputContainer.floatPlaceholder = 'always'; + if (this._formField && this._formField.floatPlaceholder === 'auto') { + this._formField.floatPlaceholder = 'always'; this._manuallyFloatingPlaceholder = true; } } @@ -339,7 +338,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { /** If the placeholder has been manually elevated, return it to its normal state. */ private _resetPlaceholder(): void { if (this._manuallyFloatingPlaceholder) { - this._inputContainer.floatPlaceholder = 'auto'; + this._formField.floatPlaceholder = 'auto'; this._manuallyFloatingPlaceholder = false; } } @@ -409,11 +408,10 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { // The display value can also be the number zero and shouldn't fall back to an empty string. const inputValue = toDisplay != null ? toDisplay : ''; - // 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._control instanceof MdInput) { - this._inputContainer._control.value = inputValue; + // If it's used within a `MdFormField`, we should set it through the property so it can go + // through change detection. + if (this._formField) { + this._formField._control.value = inputValue; } else { this._element.nativeElement.value = inputValue; } @@ -471,7 +469,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { } private _getConnectedElement(): ElementRef { - return this._inputContainer ? this._inputContainer._connectionContainerRef : this._element; + return this._formField ? this._formField._connectionContainerRef : this._element; } /** Returns the width of the input element, so the panel width can match it. */ diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts index 54fc87a2a537..826ff37dd0c2 100644 --- a/src/lib/form-field/form-field.ts +++ b/src/lib/form-field/form-field.ts @@ -60,6 +60,8 @@ export class MdPlaceholder {} 'class': 'mat-hint', '[class.mat-right]': 'align == "end"', '[attr.id]': 'id', + // Remove align attribute to prevent it from interfering with layout. + '[attr.align]': 'null', } }) export class MdHint { @@ -107,6 +109,9 @@ export abstract class MdFormFieldControl { */ stateChanges: Observable; + /** The value of the control. */ + value: any; + /** Gets the element ID for this control. */ abstract getId(): string; @@ -142,6 +147,7 @@ export abstract class MdFormFieldControl { /** Container for form controls that applies Material Design styling and behavior. */ @Component({ moduleId: module.id, + // TODO(mmalerba): the input-container selectors and classes are deprecated and will be removed. selector: 'md-input-container, mat-input-container, md-form-field, mat-form-field', templateUrl: 'form-field.html', // MdInput is a directive and can't have styles, so we need to include its styles here. @@ -158,8 +164,6 @@ export abstract class MdFormFieldControl { ]), ], host: { - // Remove align attribute to prevent it from interfering with layout. - '[attr.align]': 'null', 'class': 'mat-input-container mat-form-field', '[class.mat-input-invalid]': '_control.isErrorState()', '[class.mat-form-field-invalid]': '_control.isErrorState()', diff --git a/src/lib/input/index.ts b/src/lib/input/index.ts index 55caf81f7187..495d4e8c37f7 100644 --- a/src/lib/input/index.ts +++ b/src/lib/input/index.ts @@ -25,9 +25,8 @@ import {MdFormFieldModule} from '../form-field/index'; PlatformModule, ], exports: [ - // TODO(mmalerba): We import and re-export the form field module since all existing users of - // `MdInput` will need this to continue using `md-input-container`. We may want to keep this - // long term since the `MdInput` directive will almost always be used with `md-form-field`. + // We re-export the `MdFormFieldModule` since `MdInput` will almost always be used together with + // `MdFormField`. MdFormFieldModule, MdInput, MdTextareaAutosize, diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts index 7db414504ceb..83ba4e6b7666 100644 --- a/src/lib/input/input.spec.ts +++ b/src/lib/input/input.spec.ts @@ -502,8 +502,8 @@ describe('MdInputContainer without forms', function () { fixture.detectChanges(); - let hintLabel = fixture.debugElement.query(By.css('.mat-hint')).nativeElement; - let endLabel = fixture.debugElement.query(By.css('.mat-hint[align="end"]')).nativeElement; + let hintLabel = fixture.debugElement.query(By.css('.mat-hint:not(.mat-right)')).nativeElement; + let endLabel = fixture.debugElement.query(By.css('.mat-hint.mat-right')).nativeElement; let input = fixture.debugElement.query(By.css('input')).nativeElement; let ariaValue = input.getAttribute('aria-describedby'); diff --git a/src/lib/public_api.ts b/src/lib/public_api.ts index 7c4bdffb425a..76c73f7f60a0 100644 --- a/src/lib/public_api.ts +++ b/src/lib/public_api.ts @@ -46,3 +46,6 @@ export * from './tabs/index'; export * from './tabs/tab-nav-bar/index'; export * from './toolbar/index'; export * from './tooltip/index'; + +// TODO(mmalerba): Temporary alias to avoid breakages, cleanup later. +export {MdFormField as MdInputContainer} from './form-field/index';