Skip to content
This repository was archived by the owner on Oct 7, 2020. It is now read-only.

Commit c706980

Browse files
trimoxtrimox
authored
feat: Add mdc-helper-text (#1596)
Add `mdc-helper-text` component. Remove `mdcTextFieldHelperText` and `mdcSelectHelperText` directives. #### Examples <mdc-text-field label="First name" required helperText="firstNameHelper"></mdc-text-field> <mdc-helper-text #firstNameHelper validation>*Required</mdc-helper-text> <mdc-form-field> <mdc-text-field formControlName="username" label="Username" required minlength="3"></mdc-text-field> <mdc-helper-text validation> <span *ngIf="demoForm.controls['username'].hasError('required')">Username is required</span> <span *ngIf="demoForm.controls['username'].hasError('minlength')">Username is not long enough</span> </mdc-helper-text> </mdc-form-field> <mdc-form-field> <mdc-text-field label="Birthdate" outlined type="date" required></mdc-text-field> <mdc-helper-text validation>*Required</mdc-helper-text> </mdc-form-field> BREAKING CHANGE: `mdcTextFieldHelperText` and `mdcSelectHelperText` were removed. Please update your code to use either `mdcHelperText` or `mdc-helper-text` selectors. Please see updated documentation for further instructions. Closes #1595
1 parent 5ddab49 commit c706980

27 files changed

+719
-526
lines changed

‎demos/src/app/components/dialog-demo/dialog-form-demo.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,19 @@
66
<form [formGroup]="profileForm" id="profileForm" (ngSubmit)="submit()" autocomplete="off" class="demo-layout__column">
77
<mdc-form-field fluid>
88
<mdc-text-field formControlName="first" label="First name" outlined required></mdc-text-field>
9-
<p mdcTextFieldHelperText persistent validation>*Required</p>
9+
<p mdcHelperText persistent validation>*Required</p>
1010
</mdc-form-field>
1111
<mdc-form-field fluid>
1212
<mdc-text-field formControlName="last" label="Last name" outlined required></mdc-text-field>
13-
<p mdcTextFieldHelperText persistent validation>*Required</p>
13+
<p mdcHelperText persistent validation>*Required</p>
1414
</mdc-form-field>
1515
<div class="demo-layout__row">
1616
<mdc-form-field>
1717
<mdc-text-field formControlName="middle" label="Middle name" outlined></mdc-text-field>
1818
</mdc-form-field>
1919
<mdc-form-field>
20-
<mdc-text-field formControlName="dob" label="Birthdate" outlined type="date"
21-
required [helperText]="birthDateHelper"></mdc-text-field>
22-
<p mdcTextFieldHelperText #birthDateHelper="mdcHelperText" validation>*Required</p>
20+
<mdc-text-field formControlName="dob" label="Birthdate" outlined type="date" required></mdc-text-field>
21+
<mdc-helper-text validation>*Required</mdc-helper-text>
2322
</mdc-form-field>
2423
</div>
2524
<mdc-form-field fluid>

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

Lines changed: 90 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ <h1>Select Menus</h1>
44
MDC Select provides Material Design single-option select menus.
55
<h2>References</h2>
66
<ul>
7-
<li><a mdc-button href="https://material.io/guidelines/components/text-fields.html"
8-
target="_blank" rel="noopener noreferrer">Material Design guidelines: Text Fields</a>
7+
<li><a mdc-button href="https://material.io/guidelines/components/text-fields.html" target="_blank" rel="noopener noreferrer">Material
8+
Design guidelines: Text Fields</a>
99
</li>
10-
<li><a mdc-button href="https://material.io/guidelines/components/menus.html"
11-
target="_blank" rel="noopener noreferrer">Material Design guidelines: Menus</a>
10+
<li><a mdc-button href="https://material.io/guidelines/components/menus.html" target="_blank" rel="noopener noreferrer">Material
11+
Design guidelines: Menus</a>
1212
</li>
1313
<li><a mdc-button href="https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/README.md"
14-
target="_blank" rel="noopener noreferrer">Material Components Web</a>
14+
target="_blank" rel="noopener noreferrer">Material Components Web</a>
1515
</li>
1616
</ul>
1717
<h2>Import</h2>
@@ -117,10 +117,33 @@ <h2>Design & API Documentation</h2>
117117
</tr>
118118
</tbody>
119119
</table>
120+
121+
<p>
122+
<span class="docs-api-class-selector-label">Selector:</span>
123+
<span class="docs-api-class-selector-name">mdc-helper-text</span>
124+
</p>
125+
<table>
126+
<thead>
127+
<tr>
128+
<th>Properties</th>
129+
<th>Description</th>
130+
</tr>
131+
</thead>
132+
<tbody>
133+
<tr>
134+
<td>validation: boolean</td>
135+
<td>Help text can be used to provide additional validation messages.</td>
136+
</tr>
137+
<tr>
138+
<td>persistent: boolean</td>
139+
<td>Help text will always be visible.</td>
140+
</tr>
141+
</tbody>
142+
</table>
120143
</div>
121144
<h2>Basic Usage</h2>
122-
<a mdc-button href="https://stackblitz.com/edit/angular-mdc-select"
123-
target="_blank" rel="noopener noreferrer">EDIT IN STACKBLITZ</a>
145+
<a mdc-button href="https://stackblitz.com/edit/angular-mdc-select" target="_blank" rel="noopener noreferrer">EDIT
146+
IN STACKBLITZ</a>
124147
</div>
125148

126149
<div class="demo-content">
@@ -129,17 +152,19 @@ <h3 class="demo-content__headline">Select</h3>
129152
<button mdc-button (click)="native1.outlined = !native1.outlined">Outlined: {{native1.outlined ? 'On' : 'Off'}}</button>
130153
<button mdc-button (click)="native1.required = !native1.required">Required: {{native1.required ? 'On' : 'Off'}}</button>
131154
<button mdc-button (click)="native1.disabled = !native1.disabled">Disabled: {{native1.disabled ? 'On' : 'Off'}}</button>
132-
<button mdc-button (click)="native1.floatLabel = !native1.floatLabel">Float Label: {{native1.floatLabel ? 'On' : 'Off'}}</button>
133-
<button mdc-button (click)="native1.setSelectedIndex(2)">Set Index (2)</button>
155+
<button mdc-button (click)="native1.floatLabel = !native1.floatLabel">Float Label: {{native1.floatLabel ? 'On' :
156+
'Off'}}</button>
157+
<button mdc-button (click)="native1.autosize = !native1.autosize">Autosize: {{native1.autosize ? 'On' : 'Off'}}</button>
158+
<button mdc-button (click)="native1.setSelectedIndex(2)">Set Index (2)</button>
134159
</div>
135160
<mdc-form-field>
136-
<mdc-select #native1 required placeholder="Select Meal" autosize [helperText]="fruitHelper">
161+
<mdc-select #native1 required placeholder="Select Meal" autosize>
137162
<mdc-icon mdcSelectIcon>fastfood</mdc-icon>
138163
<option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
139164
{{food.viewValue}}
140165
</option>
141166
</mdc-select>
142-
<p mdcSelectHelperText #fruitHelper="mdcSelectHelperText" validation>
167+
<p mdcHelperText validation>
143168
<span *ngIf="!native1.value">Meal selection is required</span>
144169
</p>
145170
</mdc-form-field>
@@ -148,13 +173,13 @@ <h3 class="demo-content__headline">Select</h3>
148173
<div class="demo-content">
149174
<h3 class="demo-content__headline">Select examples</h3>
150175
<mdc-form-field>
151-
<mdc-select>
176+
<mdc-select #example1>
152177
<option value="apple">Apple</option>
153178
<option value="orange">Orange</option>
154179
</mdc-select>
155180
</mdc-form-field>
156181
<mdc-form-field>
157-
<mdc-select placeholder="Unit" outlined>
182+
<mdc-select placeholder="Unit">
158183
<option value="kg">kg</option>
159184
<option value="ml">ml</option>
160185
</mdc-select>
@@ -179,14 +204,15 @@ <h3 class="demo-content__headline">Select with ngModel</h3>
179204
<button mdc-button (click)="select.outlined = !select.outlined">Outlined: {{select.outlined ? 'On' : 'Off'}}</button>
180205
<button mdc-button (click)="select.required = !select.required">Required: {{select.required ? 'On' : 'Off'}}</button>
181206
<button mdc-button (click)="select.disabled = !select.disabled">Disabled: {{select.disabled ? 'On' : 'Off'}}</button>
182-
<button mdc-button (click)="select.floatLabel = !select.floatLabel">Float Label: {{select.floatLabel ? 'On' : 'Off'}}</button>
207+
<button mdc-button (click)="select.floatLabel = !select.floatLabel">Float Label: {{select.floatLabel ? 'On' :
208+
'Off'}}</button>
183209
<button mdc-button (click)="demoSelectModel.reset()">Clear Selection</button>
184210
<button mdc-button (click)="select.setSelectionByValue('fruit-3')">Select Fruit</button>
185211
<button mdc-button (click)="select.setSelectedIndex(4)">Set Index (4)</button>
186212
</div>
187213
<form #demoSelectForm="ngForm" id="demoSelectForm">
188-
<mdc-select #select placeholder="Favorite food" ngModel #demoSelectModel="ngModel" name="food" outlined
189-
(change)="onChange($event)" (selectionChange)="onSelectionChange($event)">
214+
<mdc-select #select placeholder="Favorite food" ngModel #demoSelectModel="ngModel" name="food" outlined (change)="onChange($event)"
215+
(selectionChange)="onSelectionChange($event)">
190216
<option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
191217
{{food.viewValue}}
192218
</option>
@@ -201,22 +227,53 @@ <h3 class="demo-content__headline">Select with ngModel</h3>
201227
<div class="demo-content">
202228
<h3 class="demo-content__headline">Select with FormControl</h3>
203229
<div class="demo-layout__row">
204-
<button mdc-button (click)="select2.outlined = !select2.outlined">Outlined: {{select2.outlined ? 'On' : 'Off'}}</button>
205-
<button mdc-button (click)="select2.required = !select2.required">Required: {{select2.required ? 'On' : 'Off'}}</button>
206-
<button mdc-button (click)="select2.disabled = !select2.disabled">Disabled: {{select2.disabled ? 'On' : 'Off'}}</button>
207-
<button mdc-button (click)="select2.floatLabel = !select2.floatLabel">Float Label: {{select2.floatLabel ? 'On' : 'Off'}}</button>
208-
<button mdc-button (click)="foodControl.reset()">Reset Selection</button>
209-
<button mdc-button (click)="select2.setSelectionByValue('pizza-1')">Select Pizza</button>
210-
<button mdc-button (click)="foodControl.setValue('pizza-1')">Set Form Value</button>
211-
<button mdc-button (click)="select2.setSelectedIndex(1)">Set Index (1)</button>
230+
<button mdc-button (click)="favoriteFood.outlined = !favoriteFood.outlined">Outlined: {{favoriteFood.outlined ?
231+
'On' : 'Off'}}</button>
232+
<button mdc-button (click)="favoriteFood.required = !favoriteFood.required">Required: {{favoriteFood.required ?
233+
'On' : 'Off'}}</button>
234+
<button mdc-button (click)="favoriteFood.disabled = !favoriteFood.disabled">Disabled: {{favoriteFood.disabled ?
235+
'On' : 'Off'}}</button>
236+
<button mdc-button (click)="favoriteFood.floatLabel = !favoriteFood.floatLabel">Float Label:
237+
{{favoriteFood.floatLabel ? 'On' : 'Off'}}</button>
238+
<button mdc-button (click)="favoriteFood.reset()">Reset Selection</button>
239+
<button mdc-button (click)="favoriteFood.setSelectionByValue('pizza-1')">Select Pizza</button>
240+
<button mdc-button (click)="favoriteFood.setValue('pizza-1')">Set Form Value</button>
241+
<button mdc-button (click)="favoriteFood.setSelectedIndex(1)">Set Index (1)</button>
212242
</div>
213-
<mdc-select #select2 placeholder="Favorite food" [formControl]="foodControl">
214-
<option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
215-
{{food.viewValue}}
216-
</option>
217-
</mdc-select>
218-
<p>Value: {{ foodControl.value }}</p>
219-
<p>Touched: {{ foodControl.touched }}</p>
220-
<p>Dirty: {{ foodControl.dirty }}</p>
243+
<form [formGroup]="foodForm" id="foodForm" (ngSubmit)="submitForm()" #formDirective="ngForm">
244+
<mdc-form-field>
245+
<mdc-select #favoriteFood placeholder="Favorite food" formControlName="favoriteFood">
246+
<option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
247+
{{food.viewValue}}
248+
</option>
249+
</mdc-select>
250+
<mdc-helper-text mdcHelperText validation>
251+
<span *ngIf="foodForm.controls['favoriteFood'].hasError('required')">Username is required</span>
252+
</mdc-helper-text>
253+
</mdc-form-field>
254+
<div class="demo-layout__row">
255+
<button mdc-button type="submit">Submit</button>
256+
<button mdc-button type="button" (click)="resetForm(formDirective)">Reset</button>
257+
</div>
258+
</form>
259+
<p>Control Valid: {{foodForm.controls['favoriteFood'].valid}}</p>
260+
<p>Dirty: {{ foodForm.dirty }}</p>
261+
<p>Valid: {{ foodForm.valid }}</p>
262+
<p>Pristine: {{ foodForm.pristine }}</p>
263+
<p>Touched: {{ foodForm.touched }}</p>
264+
<p>Value: {{ foodForm.value | json }}</p>
265+
</div>
266+
267+
<div class="demo-content">
268+
<h3 class="demo-content__headline">Enhanced Select</h3>
269+
<mdc-form-field>
270+
<mdc-select placeholder="Fruit">
271+
<mdc-list>
272+
<mdc-list-item>Apple</mdc-list-item>
273+
<mdc-list-item>Orange</mdc-list-item>
274+
<mdc-list-item>Banana</mdc-list-item>
275+
</mdc-list>
276+
</mdc-select>
277+
</mdc-form-field>
221278
</div>
222-
</div>
279+
</div>

‎demos/src/app/components/select-demo/select-demo.ts

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,39 @@
11
import { Component } from '@angular/core';
2-
import { FormControl, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
2+
import { FormControl, FormGroup, FormGroupDirective, FormBuilder, NgForm, Validators } from '@angular/forms';
3+
4+
import { MdcSelect, ErrorStateMatcher } from '@angular-mdc/web';
5+
6+
/** Error when invalid control is dirty, touched, or submitted. */
7+
export class MyErrorStateMatcher implements ErrorStateMatcher {
8+
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
9+
return !!(control && control.invalid && (control.touched || (form && form.submitted)));
10+
}
11+
}
312

413
@Component({
514
templateUrl: './select-demo.html'
615
})
716
export class SelectDemo {
17+
matcher = new MyErrorStateMatcher();
18+
819
// foodControl = new FormControl('fruit-3');
920
foodControl = new FormControl();
1021

22+
foodForm = new FormGroup({
23+
favoriteFood: new FormControl(
24+
{ value: '', disabled: false }, [Validators.required])
25+
});
26+
1127
public formOne: FormGroup;
1228
public fruits: object[] = [
1329
{
1430
id: 1,
15-
name: "Pineapple",
31+
name: 'Pineapple',
1632
tasty: true
1733
},
1834
{
1935
id: 2,
20-
name: "Watermelon",
36+
name: 'Watermelon',
2137
tasty: false
2238
}
2339
];
@@ -42,6 +58,18 @@ export class SelectDemo {
4258
this.foodControl.setValue('fruit-3');
4359
}
4460

61+
submitForm() {
62+
console.log(this.foodForm);
63+
if (this.foodForm.invalid) {
64+
return;
65+
}
66+
}
67+
68+
resetForm(formDirective: FormGroupDirective) {
69+
formDirective.resetForm();
70+
this.foodForm.reset();
71+
}
72+
4573
onChange(event: { index: number, value: any }) {
4674
console.log(`onChange: ${event.index}`);
4775
}

0 commit comments

Comments
 (0)