Skip to content

Commit f865dd3

Browse files
mmalerbammalerba
committed
update demo to use mat-label
1 parent 8639498 commit f865dd3

File tree

18 files changed

+289
-166
lines changed

18 files changed

+289
-166
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<h2>Filtering and selection</h2>
33
<p>Select your favorite state</p>
44
<mat-form-field>
5-
<input matInput placeholder="Search for a state" [matAutocomplete]="autocomplete"
5+
<mat-label>Search for a state</mat-label>
6+
<input matInput [matAutocomplete]="autocomplete"
67
[(ngModel)]="value" (ngModelChange)="filteredStates = filter(value)">
78
<mat-autocomplete #autocomplete="matAutocomplete">
89
<mat-option *ngFor="let state of filteredStates" [value]="state.name">

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<section>
22
<h2>Choose a date (e.g. choose your date of birth)</h2>
33
<mat-form-field>
4+
<mat-label>Date of birth</mat-label>
45
<input matInput
56
[matDatepicker]="birthdayPicker"
67
[(ngModel)]="birthday"
78
#birthdayModel="ngModel"
89
[max]="maxBirthday"
9-
required
10-
placeholder="Date of birth">
10+
required>
1111
<mat-datepicker-toggle matSuffix [for]="birthdayPicker"></mat-datepicker-toggle>
1212
<mat-datepicker #birthdayPicker startView="year"></mat-datepicker>
1313
<mat-error *ngIf="birthdayModel.hasError('required')">
@@ -44,14 +44,14 @@ <h2>Choose a date with touch UI (e.g. choose a payment date on mobile)</h2>
4444
<section>
4545
<h2>Choose date with startAt, min and max (e.g. schedule a departing and returning flight)</h2>
4646
<mat-form-field>
47+
<mat-label>Departure date</mat-label>
4748
<input matInput
4849
[matDatepicker]="departPicker"
4950
[(ngModel)]="departDate"
5051
#departDateModel="ngModel"
5152
[min]="minTripDate"
5253
[max]="maxTripDate"
53-
required
54-
placeholder="Departure date">
54+
required>
5555
<mat-datepicker-toggle matSuffix [for]="departPicker"></mat-datepicker-toggle>
5656
<mat-datepicker #departPicker [startAt]="startTripDate"></mat-datepicker>
5757
<mat-error *ngIf="departDateModel.hasError('required')">
@@ -65,13 +65,13 @@ <h2>Choose date with startAt, min and max (e.g. schedule a departing and returni
6565
</mat-error>
6666
</mat-form-field>
6767
<mat-form-field>
68+
<mat-label>Return date</mat-label>
6869
<input matInput
6970
[matDatepicker]="returnPicker"
7071
[(ngModel)]="returnDate"
7172
#returnDateModel="ngModel"
7273
[min]="departDate || minTripDate"
73-
[max]="maxTripDate"
74-
placeholder="Return date">
74+
[max]="maxTripDate">
7575
<mat-datepicker-toggle matSuffix [for]="returnPicker"></mat-datepicker-toggle>
7676
<mat-datepicker #returnPicker [startAt]="startTripDate"></mat-datepicker>
7777
<mat-error *ngIf="returnDateModel.hasError('matDatepickerMin') && !departDate">
@@ -89,15 +89,15 @@ <h2>Choose date with startAt, min and max (e.g. schedule a departing and returni
8989
<section>
9090
<h2>Choose date with date filter (e.g. schedule a doctor's appointment)</h2>
9191
<mat-form-field>
92+
<mat-label>Appointment date</mat-label>
9293
<input matInput
9394
[matDatepicker]="appointmentPicker"
9495
[(ngModel)]="appointmentDate"
9596
#appointmentDateModel="ngModel"
9697
[min]="minAppointmentDate"
9798
[max]="maxAppointmentDate"
9899
[matDatepickerFilter]="weekdaysOnly"
99-
required
100-
placeholder="Appointment date">
100+
required>
101101
<mat-datepicker-toggle matSuffix [for]="appointmentPicker"></mat-datepicker-toggle>
102102
<mat-datepicker #appointmentPicker></mat-datepicker>
103103
<mat-error *ngIf="appointmentDateModel.hasError('required')">

‎src/demo-app/a11y/dialog/dialog-address-form-a11y.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,44 @@ <h2 mat-dialog-title>Company</h2>
33
<mat-dialog-content>
44
<form class="example-form">
55
<mat-form-field class="example-full-width">
6-
<input matInput placeholder="Company (disabled)" disabled value="Google">
6+
<mat-label>Company (disabled)</mat-label>
7+
<input matInput disabled value="Google">
78
</mat-form-field>
89

910
<table class="example-full-width" cellspacing="0"><tr>
1011
<td><mat-form-field class="example-full-width">
11-
<input matInput placeholder="First name">
12+
<mat-label>First name</mat-label>
13+
<input matInput>
1214
</mat-form-field></td>
1315
<td><mat-form-field class="example-full-width">
14-
<input matInput placeholder="Long Last Name That Will Be Truncated">
16+
<mat-label>Long last name that will be truncated</mat-label>
17+
<input matInput>
1518
</mat-form-field></td>
1619
</tr></table>
1720

1821
<p>
1922
<mat-form-field class="example-full-width">
20-
<textarea matInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
23+
<mat-label>Address</mat-label>
24+
<textarea matInput>1600 Amphitheatre Pkwy</textarea>
2125
</mat-form-field>
2226
<mat-form-field class="example-full-width">
23-
<textarea matInput placeholder="Address 2"></textarea>
27+
<mat-label>Address 2</mat-label>
28+
<textarea matInput></textarea>
2429
</mat-form-field>
2530
</p>
2631

2732
<table class="example-full-width" cellspacing="0"><tr>
2833
<td><mat-form-field class="example-full-width">
29-
<input matInput placeholder="City">
34+
<mat-label>City</mat-label>
35+
<input matInput>
3036
</mat-form-field></td>
3137
<td><mat-form-field class="example-full-width">
32-
<input matInput placeholder="State">
38+
<mat-label>State</mat-label>
39+
<input matInput>
3340
</mat-form-field></td>
3441
<td><mat-form-field class="example-full-width">
35-
<input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
42+
<mat-label>Postal code</mat-label>
43+
<input matInput #postalCode maxlength="5" value="94043">
3644
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
3745
</mat-form-field></td>
3846
</tr></table>

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<section>
22
<h2>Basic input box (e.g. name field)</h2>
33
<mat-form-field floatLabel="never">
4-
<input matInput placeholder="First name" [(ngModel)]="firstName">
4+
<mat-label>First name</mat-label>
5+
<input matInput [(ngModel)]="firstName">
56
</mat-form-field>
67
<mat-form-field floatLabel="never">
7-
<input matInput placeholder="Last name" [(ngModel)]="lastName">
8+
<mat-label>Last name</mat-label>
9+
<input matInput [(ngModel)]="lastName">
810
</mat-form-field>
911
</section>
1012

1113
<section>
1214
<h2>Input with hint (e.g. password field)</h2>
1315
<mat-form-field hideRequiredMarker>
14-
<input matInput [type]="passwordType" placeholder="Password" [(ngModel)]="password" required
15-
#passwordModel="ngModel">
16+
<mat-label>Password</mat-label>
17+
<input matInput [type]="passwordType" [(ngModel)]="password" required #passwordModel="ngModel">
1618
<button mat-icon-button matSuffix [attr.aria-label]="passwordToggleLabel"
1719
(click)="showPassword = !showPassword">
1820
<mat-icon>{{passwordToggleIcon}}</mat-icon>
@@ -25,8 +27,8 @@ <h2>Input with hint (e.g. password field)</h2>
2527
<section>
2628
<h2>Input with error message (e.g. email field)</h2>
2729
<mat-form-field>
28-
<input matInput type="email" placeholder="Email" [(ngModel)]="email" required email
29-
#emailModel="ngModel">
30+
<mat-label>Email</mat-label>
31+
<input matInput type="email" [(ngModel)]="email" required email #emailModel="ngModel">
3032
<mat-error *ngIf="emailModel.hasError('required')">You must enter your email.</mat-error>
3133
<mat-error *ngIf="emailModel.hasError('email')">Not a valid email address.</mat-error>
3234
</mat-form-field>
@@ -35,12 +37,14 @@ <h2>Input with error message (e.g. email field)</h2>
3537
<section>
3638
<h2>Input with prefix & suffix (e.g. currency converter)</h2>
3739
<mat-form-field floatLabel="always">
38-
<input matInput type="number" placeholder="USD" [(ngModel)]="usd">
40+
<mat-label>USD</mat-label>
41+
<input matInput type="number" [(ngModel)]="usd">
3942
<span matPrefix>$</span>
4043
</mat-form-field>
4144
=
4245
<mat-form-field floatLabel="always">
43-
<input matInput type="number" placeholder="JPY" [(ngModel)]="jpy">
46+
<mat-label>JPY</mat-label>
47+
<input matInput type="number" [(ngModel)]="jpy">
4448
<span matPrefix>‎¥‎</span>
4549
</mat-form-field>
4650
(as of 7/31/2017)

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

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ <h2>Single selection</h2>
33
<p>Select your favorite color</p>
44

55
<mat-form-field>
6-
<mat-select placeholder="Colors" [(ngModel)]="selectedColor">
6+
<mat-label>Colors</mat-label>
7+
<mat-select [(ngModel)]="selectedColor">
78
<mat-option *ngFor="let color of colors" [value]="color.value">
89
{{ color.label }}
910
</mat-option>
@@ -16,7 +17,8 @@ <h2>Multiple selection</h2>
1617
<p>Pick toppings for your pizza</p>
1718

1819
<mat-form-field>
19-
<mat-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
20+
<mat-label>Toppings</mat-label>
21+
<mat-select [(ngModel)]="selectedTopping" multiple>
2022
<mat-option *ngFor="let topping of toppings" [value]="topping.value">
2123
{{ topping.label }}
2224
</mat-option>
@@ -29,7 +31,8 @@ <h2>Grouped options</h2>
2931
<p>Pick your Pokemon</p>
3032

3133
<mat-form-field>
32-
<mat-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
34+
<mat-label>Pokemon</mat-label>
35+
<mat-select [(ngModel)]="selectedPokemon">
3336
<mat-optgroup *ngFor="let group of pokemon" [label]="group.label">
3437
<mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
3538
{{ creature.label }}
@@ -44,21 +47,24 @@ <h2>Colors</h2>
4447

4548
<div class="select-a11y-spacer">
4649
<mat-form-field color="primary">
47-
<mat-select placeholder="ZIP code">
50+
<mat-label>ZIP code</mat-label>
51+
<mat-select>
4852
<mat-option value="2000">2000</mat-option>
4953
<mat-option value="2100">2100</mat-option>
5054
</mat-select>
5155
</mat-form-field>
5256

5357
<mat-form-field color="accent">
54-
<mat-select placeholder="State">
58+
<mat-label>State</mat-label>
59+
<mat-select>
5560
<mat-option value="alaska">Alaska</mat-option>
5661
<mat-option value="alabama">Alabama</mat-option>
5762
</mat-select>
5863
</mat-form-field>
5964

6065
<mat-form-field color="warn">
61-
<mat-select placeholder="Language">
66+
<mat-label>Language</mat-label>
67+
<mat-select>
6268
<mat-option value="english">English</mat-option>
6369
<mat-option value="spanish">Spanish</mat-option>
6470
</mat-select>
@@ -67,21 +73,24 @@ <h2>Colors</h2>
6773

6874
<div class="select-a11y-spacer">
6975
<mat-form-field color="primary">
70-
<mat-select placeholder="Digimon" multiple>
76+
<mat-label>Digimon</mat-label>
77+
<mat-select multiple>
7178
<mat-option value="mihiramon">Mihiramon</mat-option>
7279
<mat-option value="sandiramon">Sandiramon</mat-option>
7380
</mat-select>
7481
</mat-form-field>
7582

7683
<mat-form-field color="accent">
77-
<mat-select placeholder="Drink" multiple>
84+
<mat-label>Drink</mat-label>
85+
<mat-select multiple>
7886
<mat-option value="water">Water</mat-option>
7987
<mat-option value="coke">Coke</mat-option>
8088
</mat-select>
8189
</mat-form-field>
8290

8391
<mat-form-field color="warn">
84-
<mat-select placeholder="Theme" multiple>
92+
<mat-label>Theme</mat-label>
93+
<mat-select multiple>
8594
<mat-option value="light">Light</mat-option>
8695
<mat-option value="dark">Dark</mat-option>
8796
</mat-select>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
<div>Reactive dirty: {{ stateCtrl.dirty }}</div>
88

99
<mat-form-field floatLabel="never">
10-
<input matInput placeholder="State" [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
10+
<mat-label>State</mat-label>
11+
<input matInput [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
1112
<mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">
1213
<mat-option *ngFor="let state of reactiveStates | async" [value]="state">
1314
<span>{{ state.name }}</span>
@@ -33,7 +34,8 @@
3334

3435
<!-- Added an ngIf below to test that autocomplete works with ngIf -->
3536
<mat-form-field *ngIf="true">
36-
<input matInput placeholder="State" [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
37+
<mat-label>State</mat-label>
38+
<input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
3739
(ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
3840
<mat-autocomplete #tdAuto="matAutocomplete">
3941
<mat-option *ngFor="let state of tdStates" [value]="state.name">
@@ -56,9 +58,9 @@
5658
<div>Option groups (currentGroupedState): {{ currentGroupedState }}</div>
5759

5860
<mat-form-field>
61+
<mat-label>State</mat-label>
5962
<input
6063
matInput
61-
placeholder="State"
6264
[matAutocomplete]="groupedAuto"
6365
[(ngModel)]="currentGroupedState"
6466
(ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,21 @@
1111
<mat-radio-button value="option_3">Radio 3</mat-radio-button>
1212
| Text 4 |
1313
<mat-form-field>
14-
<input matInput placeholder="Input" value="Text Input">
14+
<mat-label>Input</mat-label>
15+
<input matInput value="Text Input">
1516
</mat-form-field>
1617
| Text 5 |
1718
<mat-form-field>
18-
<mat-select placeholder="This placeholder is really really really long">
19+
<mat-label>This label is really really really long</mat-label>
20+
<mat-select>
1921
<mat-option value="option">Option</mat-option>
2022
<mat-option value="long">This option is really really really long</mat-option>
2123
</mat-select>
2224
</mat-form-field>
2325
| Text 6 |
2426
<mat-form-field>
25-
<textarea matInput placeholder="Input" matTextareaAutosize>Textarea&#10;Line 2</textarea>
27+
<mat-label>Input</mat-label>
28+
<textarea matInput matTextareaAutosize>Textarea&#10;Line 2</textarea>
2629
</mat-form-field>
2730
| Text After
2831
</mat-card-content>
@@ -42,18 +45,21 @@ <h1>
4245
<mat-radio-button value="option_3">Radio 3</mat-radio-button>
4346
| Text 4 |
4447
<mat-form-field>
45-
<input matInput placeholder="Input" value="Text Input">
48+
<mat-label>Input</mat-label>
49+
<input matInput value="Text Input">
4650
</mat-form-field>
4751
| Text 5 |
4852
<mat-form-field>
49-
<mat-select placeholder="This placeholder is really really really long">
53+
<mat-label>This label is really really really long</mat-label>
54+
<mat-select>
5055
<mat-option value="option">Option</mat-option>
5156
<mat-option value="long">This option is really really really long</mat-option>
5257
</mat-select>
5358
</mat-form-field>
5459
| Text 6 |
5560
<mat-form-field>
56-
<textarea matInput placeholder="Input" matTextareaAutosize>Textarea&#10;Line 2</textarea>
61+
<mat-label>Input</mat-label>
62+
<textarea matInput matTextareaAutosize>Textarea&#10;Line 2</textarea>
5763
</mat-form-field>
5864
| Text After
5965
</h1>

0 commit comments

Comments
 (0)