Skip to content

Commit 8daf84e

Browse files
AnthonyNahasAnthonyNahas
committed
fix(demo): adjusted the docs of the lib examples in md #163 #143 
1 parent c27acdb commit 8daf84e

File tree

3 files changed

+93
-52
lines changed

3 files changed

+93
-52
lines changed

‎demo/src/app/home/home.component.html

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -133,9 +133,9 @@ <h1>@angular-material-extensions/password-strength</h1>
133133
<!--password input filed-->
134134
<mat-form-field appearance="outline" style="width: 100%">
135135
<mat-label>Password</mat-label>
136-
<mat-pass-toggle-visibility #toggle2 matSuffix></mat-pass-toggle-visibility>
136+
<mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
137137
<input matInput #passwordWithValidation
138-
[type]="toggle2.type"
138+
[type]="toggle.type"
139139
required
140140
[formControl]="passwordComponentWithValidation.passwordFormControl"
141141
placeholder="Password">
@@ -229,10 +229,6 @@ <h1>@angular-material-extensions/password-strength</h1>
229229
{{passwordWithConfirmation.value.length}} / {{passwordComponentWithConfirmation.max}}
230230
</mat-hint>
231231

232-
<!--password error msgs-->
233-
<!-- <mat-error *ngIf="passwordComponentWithConfirmation.passwordFormControl.invalid">-->
234-
<!-- Password is invalid-->
235-
<!-- </mat-error>-->
236232
<mat-error *ngIf="passwordComponentWithConfirmation.passwordFormControl.hasError('required')">
237233
Password is required
238234
</mat-error>
@@ -254,7 +250,7 @@ <h1>@angular-material-extensions/password-strength</h1>
254250
[passwordComponent]="passwordComponentWithConfirmation">
255251
</mat-password-strength-info>
256252

257-
<!--password input filed-->
253+
<!--password input field for confirmation-->
258254
<mat-form-field appearance="outline" class="mt-3" style="width: 100%">
259255
<mat-label>Confirm Password</mat-label>
260256
<mat-pass-toggle-visibility #toggleConfirmPassword matSuffix></mat-pass-toggle-visibility>

‎demo/src/assets/md/home/e2/html.md

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
11
```html
2-
<div fxFlex>
3-
<!--password input filed-->
4-
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
2+
<!--password input filed-->
3+
<mat-form-field appearance="outline" style="width: 100%">
54
<mat-label>Password</mat-label>
6-
<mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
7-
<input matInput #password
8-
[type]="toggle.type"
5+
<mat-pass-toggle-visibility #toggle2 matSuffix></mat-pass-toggle-visibility>
6+
<input matInput #passwordWithValidation
7+
[type]="toggle2.type"
98
required
9+
[formControl]="passwordComponentWithValidation.passwordFormControl"
1010
placeholder="Password">
11-
<mat-hint align="end" aria-live="polite">
12-
{{password.value.length}} / 25
13-
</mat-hint>
14-
</mat-form-field>
15-
<!--@angular-material-extensions/password-strength's main component-->
16-
<mat-password-strength #passwordComponent
17-
(onStrengthChanged)="onStrengthChanged($event)"
18-
[password]="password.value">
19-
</mat-password-strength>
20-
<!--Password's strength info-->
21-
<mat-password-strength-info
22-
*ngIf="showDetails"
23-
[passwordComponent]="passwordComponent">
24-
</mat-password-strength-info>
25-
</div>
11+
12+
<!--password hint-->
13+
<mat-hint align="end" aria-live="polite">
14+
{{passwordWithValidation.value.length}} / {{passwordComponentWithValidation.max}}
15+
</mat
16+
<!--password error msgs-->
17+
<mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('required')">
18+
Password is required
19+
</mat-error>
20+
<mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('pattern')">
21+
Password is not valid
22+
</mat-error>
23+
24+
</mat-form-field>
25+
26+
<!--@angular-material-extensions/password-strength's main component-->
27+
<mat-password-strength #passwordComponentWithValidation
28+
(onStrengthChanged)="onStrengthChanged($event)"
29+
[password]="passwordWithValidation.value">
30+
</mat-password-str
31+
<!--Password's strength info-->
32+
<mat-password-strength-info
33+
*ngIf="showDetails"
34+
[passwordComponent]="passwordComponentWithValidation">
35+
</mat-password-strength
2636
```

‎demo/src/assets/md/home/e3/html.md

Lines changed: 59 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,61 @@
11
```html
2-
<div fxFlex>
3-
<!--password input filed-->
4-
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
5-
<mat-label>Password</mat-label>
6-
<mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
7-
<input matInput #password
8-
[type]="toggle.type"
9-
required
10-
placeholder="Password">
11-
<mat-hint align="end" aria-live="polite">
12-
{{password.value.length}} / 25
13-
</mat-hint>
14-
</mat-form-field>
15-
<!--@angular-material-extensions/password-strength's main component-->
16-
<mat-password-strength #passwordComponent
17-
(onStrengthChanged)="onStrengthChanged($event)"
18-
[password]="password.value">
19-
</mat-password-strength>
20-
<!--Password's strength info-->
21-
<mat-password-strength-info
22-
*ngIf="showDetails"
23-
[passwordComponent]="passwordComponent">
24-
</mat-password-strength-info>
25-
</div>
2+
<!--password input filed-->
3+
<mat-form-field appearance="outline" style="width: 100%">
4+
<mat-label>Password</mat-label>
5+
<mat-pass-toggle-visibility #toggle3 matSuffix></mat-pass-toggle-visibility>
6+
<input matInput #passwordWithConfirmation
7+
[type]="toggle3.type"
8+
[formControl]="passwordComponentWithConfirmation.passwordFormControl"
9+
placeholder="Password"
10+
required>
11+
12+
<!--password hint-->
13+
<mat-hint align="end" aria-live="polite">
14+
{{passwordWithConfirmation.value.length}} / {{passwordComponentWithConfirmation.max}}
15+
</mat-hint>
16+
17+
<!-- Error Messages -->
18+
<mat-error *ngIf="passwordComponentWithConfirmation.passwordFormControl.hasError('required')">
19+
Password is required
20+
</mat-error>
21+
<mat-error *ngIf="passwordComponentWithConfirmation.passwordFormControl.hasError('pattern')">
22+
Password is not valid
23+
</mat-error>
24+
</mat-form-field>
25+
26+
<!--@angular-material-extensions/password-strength's main component-->
27+
<mat-password-strength #passwordComponentWithConfirmation
28+
(onStrengthChanged)="onStrengthChanged($event)"
29+
[password]="passwordWithConfirmation.value">
30+
</mat-password-strength>
31+
32+
<!--Password's strength info-->
33+
<mat-password-strength-info
34+
*ngIf="showDetails3"
35+
[passwordComponent]="passwordComponentWithConfirmation">
36+
</mat-password-strength-info>
37+
38+
<!--password input field for confirmation-->
39+
<mat-form-field appearance="outline" class="mt-3" style="width: 100%">
40+
<mat-label>Confirm Password</mat-label>
41+
<mat-pass-toggle-visibility #toggleConfirmPassword matSuffix></mat-pass-toggle-visibility>
42+
<input matInput #passwordToConfirm
43+
[type]="toggleConfirmPassword.type"
44+
[formControl]="passwordComponentWithConfirmation.passwordConfirmationFormControl"
45+
placeholder="Password">
46+
47+
<!-- password hint-->
48+
<mat-hint align="end" aria-live="polite">
49+
{{passwordToConfirm.value.length}} / {{passwordComponentWithConfirmation.max}}
50+
</mat-hint>
51+
52+
<!-- password error msgs-->
53+
<mat-error *ngIf="passwordComponentWithConfirmation.passwordConfirmationFormControl.hasError('required')">
54+
Password confirmation is required
55+
</mat-error>
56+
<mat-error
57+
*ngIf="passwordComponentWithConfirmation.passwordConfirmationFormControl.hasError('notConfirmed')">
58+
Password is not the same
59+
</mat-error>
60+
</mat-form-field>
2661
```

0 commit comments

Comments
 (0)