Skip to content

Commit d914cc4

Browse files
mmalerbajelbourn
mmalerba
authored and
jelbourn
committed
feat(select): make select work inside form-field (#6488)
1 parent f9b5ccd commit d914cc4

29 files changed

+1038
-954
lines changed

‎src/demo-app/a11y/select/select-a11y.html

Lines changed: 59 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,71 +2,89 @@
22
<h2>Single selection</h2>
33
<p>Select your favorite color</p>
44

5-
<md-select placeholder="Colors" [(ngModel)]="selectedColor">
6-
<md-option *ngFor="let color of colors" [value]="color.value">
7-
{{ color.label }}
8-
</md-option>
9-
</md-select>
5+
<md-form-field>
6+
<md-select placeholder="Colors" [(ngModel)]="selectedColor">
7+
<md-option *ngFor="let color of colors" [value]="color.value">
8+
{{ color.label }}
9+
</md-option>
10+
</md-select>
11+
</md-form-field>
1012
</section>
1113

1214
<section>
1315
<h2>Multiple selection</h2>
1416
<p>Pick toppings for your pizza</p>
1517

16-
<md-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
17-
<md-option *ngFor="let topping of toppings" [value]="topping.value">
18-
{{ topping.label }}
19-
</md-option>
20-
</md-select>
18+
<md-form-field>
19+
<md-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
20+
<md-option *ngFor="let topping of toppings" [value]="topping.value">
21+
{{ topping.label }}
22+
</md-option>
23+
</md-select>
24+
</md-form-field>
2125
</section>
2226

2327
<section>
2428
<h2>Grouped options</h2>
2529
<p>Pick your Pokemon</p>
2630

27-
<md-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
28-
<md-optgroup *ngFor="let group of pokemon" [label]="group.label">
29-
<md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
30-
{{ creature.label }}
31-
</md-option>
32-
</md-optgroup>
33-
</md-select>
31+
<md-form-field>
32+
<md-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
33+
<md-optgroup *ngFor="let group of pokemon" [label]="group.label">
34+
<md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
35+
{{ creature.label }}
36+
</md-option>
37+
</md-optgroup>
38+
</md-select>
39+
</md-form-field>
3440
</section>
3541

3642
<section>
3743
<h2>Colors</h2>
3844

3945
<div class="select-a11y-spacer">
40-
<md-select placeholder="ZIP code" color="primary">
41-
<md-option value="2000">2000</md-option>
42-
<md-option value="2100">2100</md-option>
43-
</md-select>
46+
<md-form-field color="primary">
47+
<md-select placeholder="ZIP code">
48+
<md-option value="2000">2000</md-option>
49+
<md-option value="2100">2100</md-option>
50+
</md-select>
51+
</md-form-field>
4452

45-
<md-select placeholder="State" color="accent">
46-
<md-option value="alaska">Alaska</md-option>
47-
<md-option value="alabama">Alabama</md-option>
48-
</md-select>
53+
<md-form-field color="accent">
54+
<md-select placeholder="State">
55+
<md-option value="alaska">Alaska</md-option>
56+
<md-option value="alabama">Alabama</md-option>
57+
</md-select>
58+
</md-form-field>
4959

50-
<md-select placeholder="Language" color="warn">
51-
<md-option value="english">English</md-option>
52-
<md-option value="spanish">Spanish</md-option>
53-
</md-select>
60+
<md-form-field color="warn">
61+
<md-select placeholder="Language">
62+
<md-option value="english">English</md-option>
63+
<md-option value="spanish">Spanish</md-option>
64+
</md-select>
65+
</md-form-field>
5466
</div>
5567

5668
<div class="select-a11y-spacer">
57-
<md-select placeholder="Digimon" color="primary" multiple>
58-
<md-option value="mihiramon">Mihiramon</md-option>
59-
<md-option value="sandiramon">Sandiramon</md-option>
60-
</md-select>
69+
<md-form-field color="primary">
70+
<md-select placeholder="Digimon" multiple>
71+
<md-option value="mihiramon">Mihiramon</md-option>
72+
<md-option value="sandiramon">Sandiramon</md-option>
73+
</md-select>
74+
</md-form-field>
6175

62-
<md-select placeholder="Drink" color="accent" multiple>
63-
<md-option value="water">Water</md-option>
64-
<md-option value="coke">Coke</md-option>
65-
</md-select>
76+
<md-form-field color="accent">
77+
<md-select placeholder="Drink" multiple>
78+
<md-option value="water">Water</md-option>
79+
<md-option value="coke">Coke</md-option>
80+
</md-select>
81+
</md-form-field>
6682

67-
<md-select placeholder="Theme" color="warn" multiple>
68-
<md-option value="light">Light</md-option>
69-
<md-option value="dark">Dark</md-option>
70-
</md-select>
83+
<md-form-field color="warn">
84+
<md-select placeholder="Theme" multiple>
85+
<md-option value="light">Light</md-option>
86+
<md-option value="dark">Dark</md-option>
87+
</md-select>
88+
</md-form-field>
7189
</div>
7290
</section>

‎src/demo-app/baseline/baseline-demo.html

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,12 @@
1414
<input mdInput placeholder="Input" value="Text Input">
1515
</md-form-field>
1616
| Text 5 |
17-
<md-select placeholder="Select">
18-
<md-option value="option">Option</md-option>
19-
</md-select>
17+
<md-form-field>
18+
<md-select placeholder="This placeholder is really really really long">
19+
<md-option value="option">Option</md-option>
20+
<md-option value="long">This option is really really really long</md-option>
21+
</md-select>
22+
</md-form-field>
2023
| Text 6 |
2124
<md-form-field>
2225
<textarea mdInput placeholder="Input" mdTextareaAutosize>Textarea&#10;Line 2</textarea>
@@ -42,9 +45,12 @@ <h1>
4245
<input mdInput placeholder="Input" value="Text Input">
4346
</md-form-field>
4447
| Text 5 |
45-
<md-select placeholder="Select">
46-
<md-option value="option">Option</md-option>
47-
</md-select>
48+
<md-form-field>
49+
<md-select placeholder="This placeholder is really really really long">
50+
<md-option value="option">Option</md-option>
51+
<md-option value="long">This option is really really really long</md-option>
52+
</md-select>
53+
</md-form-field>
4854
| Text 6 |
4955
<md-form-field>
5056
<textarea mdInput placeholder="Input" mdTextareaAutosize>Textarea&#10;Line 2</textarea>

‎src/demo-app/dialog/dialog-demo.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,13 @@ <h2>Dialog backdrop</h2>
5656
<h2>Other options</h2>
5757

5858
<p>
59-
<md-select placeholder="Button alignment" [(ngModel)]="actionsAlignment">
60-
<md-option>Start</md-option>
61-
<md-option value="end">End</md-option>
62-
<md-option value="center">Center</md-option>
63-
</md-select>
59+
<md-form-field>
60+
<md-select placeholder="Button alignment" [(ngModel)]="actionsAlignment">
61+
<md-option>Start</md-option>
62+
<md-option value="end">End</md-option>
63+
<md-option value="center">Center</md-option>
64+
</md-select>
65+
</md-form-field>
6466
</p>
6567

6668
<p>

‎src/demo-app/select/select-demo.html

Lines changed: 62 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,18 @@
66
<md-card>
77
<md-card-subtitle>ngModel</md-card-subtitle>
88

9-
<md-select placeholder="Drink" [color]="drinksTheme" [(ngModel)]="currentDrink" [required]="drinksRequired"
10-
[disabled]="drinksDisabled" [floatPlaceholder]="floatPlaceholder" #drinkControl="ngModel">
11-
<md-option>None</md-option>
12-
<md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
13-
{{ drink.viewValue }}
14-
</md-option>
15-
</md-select>
9+
<md-form-field [floatPlaceholder]="floatPlaceholder" [color]="drinksTheme">
10+
<md-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="drinksRequired"
11+
[disabled]="drinksDisabled" #drinkControl="ngModel">
12+
<md-option>None</md-option>
13+
<md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
14+
{{ drink.viewValue }}
15+
</md-option>
16+
</md-select>
17+
<md-icon mdPrefix class="demo-drink-icon">local_drink</md-icon>
18+
<md-hint>Pick a drink!</md-hint>
19+
<md-error>You must make a selection</md-error>
20+
</md-form-field>
1621
<p> Value: {{ currentDrink }} </p>
1722
<p> Touched: {{ drinkControl.touched }} </p>
1823
<p> Dirty: {{ drinkControl.dirty }} </p>
@@ -28,7 +33,9 @@
2833
<p>
2934
<label for="drinks-theme">Theme:</label>
3035
<select [(ngModel)]="drinksTheme" id="drinks-theme">
31-
<option *ngFor="let theme of availableThemes" [value]="theme.value">{{ theme.name }}</option>
36+
<option *ngFor="let theme of availableThemes" [value]="theme.value">
37+
{{theme.name}}
38+
</option>
3239
</select>
3340
</p>
3441

@@ -42,12 +49,14 @@
4249
<md-card-subtitle>Multiple selection</md-card-subtitle>
4350

4451
<md-card-content>
45-
<md-select multiple [color]="pokemonTheme" placeholder="Pokemon" [(ngModel)]="currentPokemon"
46-
[required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
47-
<md-option *ngFor="let creature of pokemon" [value]="creature.value">
48-
{{ creature.viewValue }}
49-
</md-option>
50-
</md-select>
52+
<md-form-field [color]="pokemonTheme">
53+
<md-select multiple placeholder="Pokemon" [(ngModel)]="currentPokemon"
54+
[required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
55+
<md-option *ngFor="let creature of pokemon" [value]="creature.value">
56+
{{ creature.viewValue }}
57+
</md-option>
58+
</md-select>
59+
</md-form-field>
5160
<p> Value: {{ currentPokemon }} </p>
5261
<p> Touched: {{ pokemonControl.touched }} </p>
5362
<p> Dirty: {{ pokemonControl.dirty }} </p>
@@ -68,12 +77,14 @@
6877
<md-card>
6978
<md-card-subtitle>Without Angular forms</md-card-subtitle>
7079

71-
<md-select placeholder="Digimon" [(value)]="currentDigimon">
72-
<md-option>None</md-option>
73-
<md-option *ngFor="let creature of digimon" [value]="creature.value">
74-
{{ creature.viewValue }}
75-
</md-option>
76-
</md-select>
80+
<md-form-field>
81+
<md-select placeholder="Digimon" [(value)]="currentDigimon">
82+
<md-option>None</md-option>
83+
<md-option *ngFor="let creature of digimon" [value]="creature.value">
84+
{{ creature.viewValue }}
85+
</md-option>
86+
</md-select>
87+
</md-form-field>
7788

7889
<p>Value: {{ currentDigimon }}</p>
7990

@@ -85,30 +96,34 @@
8596
<md-card-subtitle>Option groups</md-card-subtitle>
8697

8798
<md-card-content>
88-
<md-select placeholder="Pokemon" [(ngModel)]="currentPokemonFromGroup">
89-
<md-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
90-
[disabled]="group.disabled">
91-
<md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
92-
{{ creature.viewValue }}
93-
</md-option>
94-
</md-optgroup>
95-
</md-select>
99+
<md-form-field>
100+
<md-select placeholder="Pokemon" [(ngModel)]="currentPokemonFromGroup">
101+
<md-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
102+
[disabled]="group.disabled">
103+
<md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
104+
{{ creature.viewValue }}
105+
</md-option>
106+
</md-optgroup>
107+
</md-select>
108+
</md-form-field>
96109
</md-card-content>
97110
</md-card>
98111

99112

100113
<md-card>
101114
<md-card-subtitle>compareWith</md-card-subtitle>
102115
<md-card-content>
103-
<md-select placeholder="Drink" [color]="drinksTheme"
104-
[(ngModel)]="currentDrinkObject"
105-
[required]="drinkObjectRequired"
106-
[compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
107-
#drinkObjectControl="ngModel">
108-
<md-option *ngFor="let drink of drinks" [value]="drink" [disabled]="drink.disabled">
109-
{{ drink.viewValue }}
110-
</md-option>
111-
</md-select>
116+
<md-form-field [color]="drinksTheme">
117+
<md-select placeholder="Drink"
118+
[(ngModel)]="currentDrinkObject"
119+
[required]="drinkObjectRequired"
120+
[compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
121+
#drinkObjectControl="ngModel">
122+
<md-option *ngFor="let drink of drinks" [value]="drink" [disabled]="drink.disabled">
123+
{{ drink.viewValue }}
124+
</md-option>
125+
</md-select>
126+
</md-form-field>
112127
<p> Value: {{ currentDrinkObject | json }} </p>
113128
<p> Touched: {{ drinkObjectControl.touched }} </p>
114129
<p> Dirty: {{ drinkObjectControl.dirty }} </p>
@@ -130,9 +145,11 @@
130145
<md-card-subtitle>formControl</md-card-subtitle>
131146

132147
<md-card-content>
133-
<md-select placeholder="Food i would like to eat" [formControl]="foodControl">
134-
<md-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }}</md-option>
135-
</md-select>
148+
<md-form-field>
149+
<md-select placeholder="Food i would like to eat" [formControl]="foodControl">
150+
<md-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }}</md-option>
151+
</md-select>
152+
</md-form-field>
136153
<p> Value: {{ foodControl.value }} </p>
137154
<p> Touched: {{ foodControl.touched }} </p>
138155
<p> Dirty: {{ foodControl.dirty }} </p>
@@ -149,9 +166,11 @@
149166
<md-card-subtitle>Change event</md-card-subtitle>
150167

151168
<md-card-content>
152-
<md-select placeholder="Starter Pokemon" (change)="latestChangeEvent = $event">
153-
<md-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }}</md-option>
154-
</md-select>
169+
<md-form-field>
170+
<md-select placeholder="Starter Pokemon" (change)="latestChangeEvent = $event">
171+
<md-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }}</md-option>
172+
</md-select>
173+
</md-form-field>
155174

156175
<p> Change event value: {{ latestChangeEvent?.value }} </p>
157176
</md-card-content>

‎src/demo-app/select/select-demo.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,8 @@
77
margin: 24px;
88
}
99

10+
.demo-drink-icon {
11+
vertical-align: bottom;
12+
padding-right: 0.25em;
13+
}
1014
}

‎src/demo-app/snack-bar/snack-bar-demo.html

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,21 @@ <h1>SnackBar demo</h1>
55
</div>
66
<div>
77
<div>Position in page: </div>
8-
<md-select [(ngModel)]="horizontalPosition">
9-
<md-option value="start">Start</md-option>
10-
<md-option value="end">End</md-option>
11-
<md-option value="left">Left</md-option>
12-
<md-option value="right">Right</md-option>
13-
<md-option value="center">Center</md-option>
14-
</md-select>
15-
<md-select [(ngModel)]="verticalPosition">
16-
<md-option value="top">Top</md-option>
17-
<md-option value="bottom">Bottom</md-option>
18-
</md-select>
8+
<md-form-field>
9+
<md-select [(ngModel)]="horizontalPosition">
10+
<md-option value="start">Start</md-option>
11+
<md-option value="end">End</md-option>
12+
<md-option value="left">Left</md-option>
13+
<md-option value="right">Right</md-option>
14+
<md-option value="center">Center</md-option>
15+
</md-select>
16+
</md-form-field>
17+
<md-form-field>
18+
<md-select [(ngModel)]="verticalPosition">
19+
<md-option value="top">Top</md-option>
20+
<md-option value="bottom">Bottom</md-option>
21+
</md-select>
22+
</md-form-field>
1923
</div>
2024
<div>
2125
<md-checkbox [(ngModel)]="action">

0 commit comments

Comments
 (0)