Skip to content

Commit 48b3cc9

Browse files
committed
address comments
1 parent b16ef28 commit 48b3cc9

File tree

5 files changed

+24
-20
lines changed

5 files changed

+24
-20
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ import {MdOptionSelectionChange, MdOption} from '../core/option/option';
4141
import {ENTER, UP_ARROW, DOWN_ARROW, ESCAPE} from '../core/keyboard/keycodes';
4242
import {Directionality} from '../core/bidi/index';
4343
import {MdFormField} from '../form-field/index';
44-
import {MdInput} from '../input/input';
4544
import {Subscription} from 'rxjs/Subscription';
4645
import {merge} from 'rxjs/observable/merge';
4746
import {fromEvent} from 'rxjs/observable/fromEvent';
@@ -154,7 +153,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
154153
private _changeDetectorRef: ChangeDetectorRef,
155154
@Inject(MD_AUTOCOMPLETE_SCROLL_STRATEGY) private _scrollStrategy,
156155
@Optional() private _dir: Directionality,
157-
@Optional() @Host() private _inputContainer: MdFormField,
156+
@Optional() @Host() private _formField: MdFormField,
158157
@Optional() @Inject(DOCUMENT) private _document: any) {}
159158

160159
ngOnDestroy() {
@@ -247,8 +246,8 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
247246
fromEvent(this._document, 'touchend')
248247
)).call(filter, (event: MouseEvent | TouchEvent) => {
249248
const clickTarget = event.target as HTMLElement;
250-
const inputContainer = this._inputContainer ?
251-
this._inputContainer._elementRef.nativeElement : null;
249+
const inputContainer = this._formField ?
250+
this._formField._elementRef.nativeElement : null;
252251

253252
return this._panelOpen &&
254253
clickTarget !== this._element.nativeElement &&
@@ -330,16 +329,16 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
330329
* This method manually floats the placeholder until the panel can be closed.
331330
*/
332331
private _floatPlaceholder(): void {
333-
if (this._inputContainer && this._inputContainer.floatPlaceholder === 'auto') {
334-
this._inputContainer.floatPlaceholder = 'always';
332+
if (this._formField && this._formField.floatPlaceholder === 'auto') {
333+
this._formField.floatPlaceholder = 'always';
335334
this._manuallyFloatingPlaceholder = true;
336335
}
337336
}
338337

339338
/** If the placeholder has been manually elevated, return it to its normal state. */
340339
private _resetPlaceholder(): void {
341340
if (this._manuallyFloatingPlaceholder) {
342-
this._inputContainer.floatPlaceholder = 'auto';
341+
this._formField.floatPlaceholder = 'auto';
343342
this._manuallyFloatingPlaceholder = false;
344343
}
345344
}
@@ -409,11 +408,10 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
409408
// The display value can also be the number zero and shouldn't fall back to an empty string.
410409
const inputValue = toDisplay != null ? toDisplay : '';
411410

412-
// If it's used in a Material container, we should set it through
413-
// the property so it can go through the change detection.
414-
if (this._inputContainer &&
415-
this._inputContainer._control instanceof MdInput) {
416-
this._inputContainer._control.value = inputValue;
411+
// If it's used within a `MdFormField`, we should set it through the property so it can go
412+
// through change detection.
413+
if (this._formField) {
414+
this._formField._control.value = inputValue;
417415
} else {
418416
this._element.nativeElement.value = inputValue;
419417
}
@@ -471,7 +469,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
471469
}
472470

473471
private _getConnectedElement(): ElementRef {
474-
return this._inputContainer ? this._inputContainer._connectionContainerRef : this._element;
472+
return this._formField ? this._formField._connectionContainerRef : this._element;
475473
}
476474

477475
/** Returns the width of the input element, so the panel width can match it. */

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@ export class MdPlaceholder {}
6060
'class': 'mat-hint',
6161
'[class.mat-right]': 'align == "end"',
6262
'[attr.id]': 'id',
63+
// Remove align attribute to prevent it from interfering with layout.
64+
'[attr.align]': 'null',
6365
}
6466
})
6567
export class MdHint {
@@ -107,6 +109,9 @@ export abstract class MdFormFieldControl {
107109
*/
108110
stateChanges: Observable<void>;
109111

112+
/** The value of the control. */
113+
value: any;
114+
110115
/** Gets the element ID for this control. */
111116
abstract getId(): string;
112117

@@ -142,6 +147,7 @@ export abstract class MdFormFieldControl {
142147
/** Container for form controls that applies Material Design styling and behavior. */
143148
@Component({
144149
moduleId: module.id,
150+
// TODO(mmalerba): the input-container selectors and classes are deprecated and will be removed.
145151
selector: 'md-input-container, mat-input-container, md-form-field, mat-form-field',
146152
templateUrl: 'form-field.html',
147153
// 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 {
158164
]),
159165
],
160166
host: {
161-
// Remove align attribute to prevent it from interfering with layout.
162-
'[attr.align]': 'null',
163167
'class': 'mat-input-container mat-form-field',
164168
'[class.mat-input-invalid]': '_control.isErrorState()',
165169
'[class.mat-form-field-invalid]': '_control.isErrorState()',

src/lib/input/index.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,8 @@ import {MdFormFieldModule} from '../form-field/index';
2525
PlatformModule,
2626
],
2727
exports: [
28-
// TODO(mmalerba): We import and re-export the form field module since all existing users of
29-
// `MdInput` will need this to continue using `md-input-container`. We may want to keep this
30-
// long term since the `MdInput` directive will almost always be used with `md-form-field`.
28+
// We re-export the `MdFormFieldModule` since `MdInput` will almost always be used together with
29+
// `MdFormField`.
3130
MdFormFieldModule,
3231
MdInput,
3332
MdTextareaAutosize,

src/lib/input/input.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -502,8 +502,8 @@ describe('MdInputContainer without forms', function () {
502502

503503
fixture.detectChanges();
504504

505-
let hintLabel = fixture.debugElement.query(By.css('.mat-hint')).nativeElement;
506-
let endLabel = fixture.debugElement.query(By.css('.mat-hint[align="end"]')).nativeElement;
505+
let hintLabel = fixture.debugElement.query(By.css('.mat-hint:not(.mat-right)')).nativeElement;
506+
let endLabel = fixture.debugElement.query(By.css('.mat-hint.mat-right')).nativeElement;
507507
let input = fixture.debugElement.query(By.css('input')).nativeElement;
508508
let ariaValue = input.getAttribute('aria-describedby');
509509

src/lib/public_api.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,6 @@ export * from './tabs/index';
4646
export * from './tabs/tab-nav-bar/index';
4747
export * from './toolbar/index';
4848
export * from './tooltip/index';
49+
50+
// TODO(mmalerba): Temporary alias to avoid breakages, cleanup later.
51+
export {MdFormField as MdInputContainer} from './form-field/index';

0 commit comments

Comments
 (0)