Skip to content

Commit 9baaaeb

Browse files
committed
address comments
1 parent b16ef28 commit 9baaaeb

13 files changed

+198
-128
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/error.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Directive, Input} from '@angular/core';
10+
11+
12+
let nextUniqueId = 0;
13+
14+
15+
/** Single error message to be shown underneath the form field. */
16+
@Directive({
17+
selector: 'md-error, mat-error',
18+
host: {
19+
'class': 'mat-error',
20+
'role': 'alert',
21+
'[attr.id]': 'id',
22+
}
23+
})
24+
export class MdError {
25+
@Input() id: string = `mat-error-${nextUniqueId++}`;
26+
}
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Observable} from 'rxjs/Observable';
10+
import {NgControl} from '@angular/forms';
11+
12+
13+
/** An interface which allows a control to work inside of a `MdFormField`. */
14+
export abstract class MdFormFieldControl {
15+
/**
16+
* Stream that emits whenever the state of the control changes such that the parent `MdFormField`
17+
* needs to run change detection.
18+
*/
19+
stateChanges: Observable<void>;
20+
21+
/** The value of the control. */
22+
value: any;
23+
24+
/** Gets the element ID for this control. */
25+
abstract getId(): string;
26+
27+
/** Gets the placeholder for this control. */
28+
abstract getPlaceholder(): string;
29+
30+
/** Gets the NgControl for this control. */
31+
abstract getNgControl(): NgControl | null;
32+
33+
/** Whether the control is focused. */
34+
abstract isFocused(): boolean;
35+
36+
/** Whether the control is empty. */
37+
abstract isEmpty(): boolean;
38+
39+
/** Whether the control is required. */
40+
abstract isRequired(): boolean;
41+
42+
/** Whether the control is disabled. */
43+
abstract isDisabled(): boolean;
44+
45+
/** Whether the control is in an error state. */
46+
abstract isErrorState(): boolean;
47+
48+
/** Sets the list of element IDs that currently describe this control. */
49+
abstract setDescribedByIds(ids: string[]): void;
50+
51+
/** Focuses this control. */
52+
abstract focus(): void;
53+
}

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

Lines changed: 8 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
Component,
1616
ContentChild,
1717
ContentChildren,
18-
Directive,
1918
ElementRef,
2019
Inject,
2120
Input,
@@ -26,7 +25,6 @@ import {
2625
} from '@angular/core';
2726
import {animate, state, style, transition, trigger} from '@angular/animations';
2827
import {coerceBooleanProperty} from '../core';
29-
import {NgControl} from '@angular/forms';
3028
import {
3129
getMdFormFieldDuplicatedHintError,
3230
getMdFormFieldMissingControlError,
@@ -38,110 +36,21 @@ import {
3836
PlaceholderOptions
3937
} from '../core/placeholder/placeholder-options';
4038
import {startWith} from '@angular/cdk/rxjs';
41-
import {Observable} from 'rxjs/Observable';
42-
43-
let nextUniqueId = 0;
44-
45-
46-
/**
47-
* The placeholder directive. The content can declare this to implement more
48-
* complex placeholders.
49-
*/
50-
@Directive({
51-
selector: 'md-placeholder, mat-placeholder'
52-
})
53-
export class MdPlaceholder {}
54-
55-
56-
/** Hint text to be shown underneath the form field control. */
57-
@Directive({
58-
selector: 'md-hint, mat-hint',
59-
host: {
60-
'class': 'mat-hint',
61-
'[class.mat-right]': 'align == "end"',
62-
'[attr.id]': 'id',
63-
}
64-
})
65-
export class MdHint {
66-
/** Whether to align the hint label at the start or end of the line. */
67-
@Input() align: 'start' | 'end' = 'start';
68-
69-
/** Unique ID for the hint. Used for the aria-describedby on the form field control. */
70-
@Input() id: string = `md-hint-${nextUniqueId++}`;
71-
}
72-
73-
74-
/** Single error message to be shown underneath the form field. */
75-
@Directive({
76-
selector: 'md-error, mat-error',
77-
host: {
78-
'class': 'mat-error',
79-
'role': 'alert',
80-
'[attr.id]': 'id',
81-
}
82-
})
83-
export class MdError {
84-
@Input() id: string = `md-error-${nextUniqueId++}`;
85-
}
39+
import {MdError} from './error';
40+
import {MdFormFieldControl} from './form-field-control';
41+
import {MdHint} from './hint';
42+
import {MdPlaceholder} from './placeholder';
43+
import {MdPrefix} from './prefix';
44+
import {MdSuffix} from './suffix';
8645

8746

88-
/** Prefix to be placed the the front of the form field. */
89-
@Directive({
90-
selector: '[mdPrefix], [matPrefix]',
91-
})
92-
export class MdPrefix {}
93-
94-
95-
/** Suffix to be placed at the end of the form field. */
96-
@Directive({
97-
selector: '[mdSuffix], [matSuffix]',
98-
})
99-
export class MdSuffix {}
100-
101-
102-
/** An interface which allows a control to work inside of a `MdFormField`. */
103-
export abstract class MdFormFieldControl {
104-
/**
105-
* Stream that emits whenever the state of the control changes such that the parent `MdFormField`
106-
* needs to run change detection.
107-
*/
108-
stateChanges: Observable<void>;
109-
110-
/** Gets the element ID for this control. */
111-
abstract getId(): string;
112-
113-
/** Gets the placeholder for this control. */
114-
abstract getPlaceholder(): string;
115-
116-
/** Gets the NgControl for this control. */
117-
abstract getNgControl(): NgControl | null;
118-
119-
/** Whether the control is focused. */
120-
abstract isFocused(): boolean;
121-
122-
/** Whether the control is empty. */
123-
abstract isEmpty(): boolean;
124-
125-
/** Whether the control is required. */
126-
abstract isRequired(): boolean;
127-
128-
/** Whether the control is disabled. */
129-
abstract isDisabled(): boolean;
130-
131-
/** Whether the control is in an error state. */
132-
abstract isErrorState(): boolean;
133-
134-
/** Sets the list of element IDs that currently describe this control. */
135-
abstract setDescribedByIds(ids: string[]): void;
136-
137-
/** Focuses this control. */
138-
abstract focus(): void;
139-
}
47+
let nextUniqueId = 0;
14048

14149

14250
/** Container for form controls that applies Material Design styling and behavior. */
14351
@Component({
14452
moduleId: module.id,
53+
// TODO(mmalerba): the input-container selectors and classes are deprecated and will be removed.
14554
selector: 'md-input-container, mat-input-container, md-form-field, mat-form-field',
14655
templateUrl: 'form-field.html',
14756
// MdInput is a directive and can't have styles, so we need to include its styles here.
@@ -158,8 +67,6 @@ export abstract class MdFormFieldControl {
15867
]),
15968
],
16069
host: {
161-
// Remove align attribute to prevent it from interfering with layout.
162-
'[attr.align]': 'null',
16370
'class': 'mat-input-container mat-form-field',
16471
'[class.mat-input-invalid]': '_control.isErrorState()',
16572
'[class.mat-form-field-invalid]': '_control.isErrorState()',

src/lib/form-field/hint.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Directive, Input} from '@angular/core';
10+
11+
12+
let nextUniqueId = 0;
13+
14+
15+
/** Hint text to be shown underneath the form field control. */
16+
@Directive({
17+
selector: 'md-hint, mat-hint',
18+
host: {
19+
'class': 'mat-hint',
20+
'[class.mat-right]': 'align == "end"',
21+
'[attr.id]': 'id',
22+
// Remove align attribute to prevent it from interfering with layout.
23+
'[attr.align]': 'null',
24+
}
25+
})
26+
export class MdHint {
27+
/** Whether to align the hint label at the start or end of the line. */
28+
@Input() align: 'start' | 'end' = 'start';
29+
30+
/** Unique ID for the hint. Used for the aria-describedby on the form field control. */
31+
@Input() id: string = `mat-hint-${nextUniqueId++}`;
32+
}

src/lib/form-field/index.ts

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,12 @@
77
*/
88

99
import {NgModule} from '@angular/core';
10-
import {
11-
MdError,
12-
MdHint,
13-
MdFormField,
14-
MdPlaceholder,
15-
MdPrefix,
16-
MdSuffix
17-
} from './form-field';
10+
import {MdError} from './error';
11+
import {MdFormField} from './form-field';
12+
import {MdHint} from './hint';
13+
import {MdPlaceholder} from './placeholder';
14+
import {MdPrefix} from './prefix';
15+
import {MdSuffix} from './suffix';
1816
import {CommonModule} from '@angular/common';
1917
import {PlatformModule} from '../core/platform/index';
2018

@@ -44,6 +42,12 @@ import {PlatformModule} from '../core/platform/index';
4442
export class MdFormFieldModule {}
4543

4644

45+
export * from './error';
4746
export * from './form-field';
47+
export * from './form-field-control';
4848
export * from './form-field-errors';
49+
export * from './hint';
50+
export * from './placeholder';
51+
export * from './prefix';
52+
export * from './suffix';
4953

src/lib/form-field/placeholder.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Directive} from '@angular/core';
10+
11+
12+
/** The floating placeholder for an `MdFormField`. */
13+
@Directive({
14+
selector: 'md-placeholder, mat-placeholder'
15+
})
16+
export class MdPlaceholder {}

src/lib/form-field/prefix.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Directive} from '@angular/core';
10+
11+
12+
/** Prefix to be placed the the front of the form field. */
13+
@Directive({
14+
selector: '[mdPrefix], [matPrefix]',
15+
})
16+
export class MdPrefix {}

0 commit comments

Comments
 (0)