Skip to content

Commit c27acdb

Browse files
AnthonyNahasAnthonyNahas
committed
fix(package): update the validators on changed password value #163 #143 
1 parent 912db7d commit c27acdb

File tree

7 files changed

+152
-108
lines changed

7 files changed

+152
-108
lines changed

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

Lines changed: 89 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -91,86 +91,86 @@ <h1>@angular-material-extensions/password-strength</h1>
9191
</mat-card-content>
9292
</mat-card>
9393
</div>
94+
9495
<!--NGX-MATERIAL-PASSWORD-STRENGTH WITH VALIDATION AND FORM CONTROLLER-->
96+
<div fxLayout="column" class="mt-3">
97+
<mat-toolbar>
98+
@angular-material-extensions/password-strength
99+
<span fxFlex></span>
100+
101+
<button mat-icon-button
102+
color="accent"
103+
matTooltip="view source"
104+
(click)="viewSource = !viewSource">
105+
<mat-icon>code</mat-icon>
106+
</button>
107+
</mat-toolbar>
108+
<mat-card>
109+
<mat-card-subtitle>
110+
client side password validation with angular built in form controller
111+
</mat-card-subtitle>
112+
<mat-card-subtitle>
113+
<mat-slide-toggle [(ngModel)]="showDetails2">Show Password Details</mat-slide-toggle>
114+
</mat-card-subtitle>
115+
116+
<mat-card-content *ngIf="viewSource">
117+
<mat-tab-group>
118+
<!--tab 1-->
119+
<mat-tab>
120+
<ng-template mat-tab-label>HTML</ng-template>
121+
<markdown src="assets/md/home/e2/html.md"></markdown>
122+
</mat-tab>
123+
124+
<mat-tab>
125+
<ng-template mat-tab-label>TS</ng-template>
126+
<markdown src="assets/md/home/e2/ts.md"></markdown>
127+
</mat-tab>
128+
</mat-tab-group>
129+
</mat-card-content>
95130

96-
<!-- <div fxLayout="column" class="mt-3">-->
97-
<!-- <mat-toolbar>-->
98-
<!-- @angular-material-extensions/password-strength-->
99-
<!-- <span fxFlex></span>-->
100-
101-
<!-- <button mat-icon-button-->
102-
<!-- color="accent"-->
103-
<!-- matTooltip="view source"-->
104-
<!-- (click)="viewSource = !viewSource">-->
105-
<!-- <mat-icon>code</mat-icon>-->
106-
<!-- </button>-->
107-
<!-- </mat-toolbar>-->
108-
<!-- <mat-card>-->
109-
<!-- <mat-card-subtitle>-->
110-
<!-- client side password validation with angular form controller-->
111-
<!-- </mat-card-subtitle>-->
112-
<!-- <mat-card-subtitle>-->
113-
<!-- <mat-slide-toggle [(ngModel)]="showDetails2">Show Password Details</mat-slide-toggle>-->
114-
<!-- </mat-card-subtitle>-->
115-
116-
<!-- <mat-card-content *ngIf="viewSource">-->
117-
<!-- <mat-tab-group>-->
118-
<!-- &lt;!&ndash;tab 1&ndash;&gt;-->
119-
<!-- <mat-tab>-->
120-
<!-- <ng-template mat-tab-label>HTML</ng-template>-->
121-
<!-- <pre><code highlight [highlight]="html2"></code></pre>-->
122-
<!-- </mat-tab>-->
123-
124-
<!-- <mat-tab>-->
125-
<!-- <ng-template mat-tab-label>TS</ng-template>-->
126-
<!-- <pre><code highlight [highlight]="ts"></code></pre>-->
127-
<!-- </mat-tab>-->
128-
<!-- </mat-tab-group>-->
129-
<!-- </mat-card-content>-->
130-
131-
<!-- <mat-card-content>-->
132-
133-
<!-- &lt;!&ndash;password input filed&ndash;&gt;-->
134-
<!-- <mat-form-field appearance="outline" style="width: 100%">-->
135-
<!-- <mat-label>Password</mat-label>-->
136-
<!-- <mat-pass-toggle-visibility #toggle2 matSuffix></mat-pass-toggle-visibility>-->
137-
<!-- <input matInput #passwordWithValidation-->
138-
<!-- [type]="toggle2.type"-->
139-
<!-- required-->
140-
<!-- [formControl]="passwordComponentWithValidation2.passwordFormControl"-->
141-
<!-- placeholder="Password">-->
142-
143-
<!-- &lt;!&ndash;password hint&ndash;&gt;-->
144-
<!-- <mat-hint align="end" aria-live="polite">-->
145-
<!-- {{passwordWithValidation.value.length}} / 25-->
146-
<!-- </mat-hint>-->
147-
148-
<!-- &lt;!&ndash;password error msgs&ndash;&gt;-->
149-
<!-- <mat-error *ngIf="passwordComponentWithValidation2.passwordFormControl.hasError('required')">-->
150-
<!-- Password is required-->
151-
<!-- </mat-error>-->
152-
<!-- <mat-error *ngIf="passwordComponentWithValidation2.passwordFormControl.hasError('pattern')">-->
153-
<!-- Password is not valid-->
154-
<!-- </mat-error>-->
155-
156-
<!-- </mat-form-field>-->
157-
158-
<!-- &lt;!&ndash;@angular-material-extensions/password-strength's main component&ndash;&gt;-->
159-
<!-- <mat-password-strength #passwordComponentWithValidation2-->
160-
<!-- (onStrengthChanged)="onStrengthChanged($event)"-->
161-
<!-- [password]="passwordWithValidation.value">-->
162-
<!-- </mat-password-strength>-->
163-
164-
<!-- &lt;!&ndash;Password's strength info&ndash;&gt;-->
165-
<!-- <mat-password-strength-info-->
166-
<!-- *ngIf="showDetails2"-->
167-
<!-- [passwordComponent]="passwordComponentWithValidation2">-->
168-
<!-- </mat-password-strength-info>-->
169-
170-
<!-- </mat-card-content>-->
171-
172-
<!-- </mat-card>-->
173-
<!-- </div>-->
131+
<mat-card-content>
132+
133+
<!--password input filed-->
134+
<mat-form-field appearance="outline" style="width: 100%">
135+
<mat-label>Password</mat-label>
136+
<mat-pass-toggle-visibility #toggle2 matSuffix></mat-pass-toggle-visibility>
137+
<input matInput #passwordWithValidation
138+
[type]="toggle2.type"
139+
required
140+
[formControl]="passwordComponentWithValidation.passwordFormControl"
141+
placeholder="Password">
142+
143+
<!--password hint-->
144+
<mat-hint align="end" aria-live="polite">
145+
{{passwordWithValidation.value.length}} / {{passwordComponentWithValidation.max}}
146+
</mat-hint>
147+
148+
<!--password error msgs-->
149+
<mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('required')">
150+
Password is required
151+
</mat-error>
152+
<mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('pattern')">
153+
Password is not valid
154+
</mat-error>
155+
156+
</mat-form-field>
157+
158+
<!--@angular-material-extensions/password-strength's main component-->
159+
<mat-password-strength #passwordComponentWithValidation
160+
(onStrengthChanged)="onStrengthChanged($event)"
161+
[password]="passwordWithValidation.value">
162+
</mat-password-strength>
163+
164+
<!--Password's strength info-->
165+
<mat-password-strength-info
166+
*ngIf="showDetails2"
167+
[passwordComponent]="passwordComponentWithValidation">
168+
</mat-password-strength-info>
169+
170+
</mat-card-content>
171+
172+
</mat-card>
173+
</div>
174174

175175
<!-- CONFIRM PASSWORD-->
176176
<div fxLayout="column" class="mt-3">
@@ -186,9 +186,6 @@ <h1>@angular-material-extensions/password-strength</h1>
186186
</button>
187187
</mat-toolbar>
188188

189-
<!-- <form [formGroup]="passwordComponentWithValidation.formGroup">-->
190-
<!-- <form [formGroup]="formGroup">-->
191-
<!-- <form>-->
192189
<mat-card>
193190
<mat-card-subtitle>
194191
confirm your password with angular form group
@@ -223,38 +220,38 @@ <h1>@angular-material-extensions/password-strength</h1>
223220
<mat-pass-toggle-visibility #toggle3 matSuffix></mat-pass-toggle-visibility>
224221
<input matInput #passwordWithConfirmation
225222
[type]="toggle3.type"
226-
[formControl]="passwordComponentWithValidation.passwordFormControl"
223+
[formControl]="passwordComponentWithConfirmation.passwordFormControl"
227224
placeholder="Password"
228225
required>
229226

230227
<!--password hint-->
231228
<mat-hint align="end" aria-live="polite">
232-
{{passwordWithConfirmation.value.length}} / {{passwordComponentWithValidation.max}}
229+
{{passwordWithConfirmation.value.length}} / {{passwordComponentWithConfirmation.max}}
233230
</mat-hint>
234231

235232
<!--password error msgs-->
236-
<!-- <mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.invalid">-->
233+
<!-- <mat-error *ngIf="passwordComponentWithConfirmation.passwordFormControl.invalid">-->
237234
<!-- Password is invalid-->
238235
<!-- </mat-error>-->
239-
<mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('required')">
236+
<mat-error *ngIf="passwordComponentWithConfirmation.passwordFormControl.hasError('required')">
240237
Password is required
241238
</mat-error>
242-
<mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('pattern')">
239+
<mat-error *ngIf="passwordComponentWithConfirmation.passwordFormControl.hasError('pattern')">
243240
Password is not valid
244241
</mat-error>
245242

246243
</mat-form-field>
247244

248245
<!--@angular-material-extensions/password-strength's main component-->
249-
<mat-password-strength #passwordComponentWithValidation
246+
<mat-password-strength #passwordComponentWithConfirmation
250247
(onStrengthChanged)="onStrengthChanged($event)"
251248
[password]="passwordWithConfirmation.value">
252249
</mat-password-strength>
253250

254251
<!--Password's strength info-->
255252
<mat-password-strength-info
256253
*ngIf="showDetails3"
257-
[passwordComponent]="passwordComponentWithValidation">
254+
[passwordComponent]="passwordComponentWithConfirmation">
258255
</mat-password-strength-info>
259256

260257
<!--password input filed-->
@@ -263,20 +260,20 @@ <h1>@angular-material-extensions/password-strength</h1>
263260
<mat-pass-toggle-visibility #toggleConfirmPassword matSuffix></mat-pass-toggle-visibility>
264261
<input matInput #passwordToConfirm
265262
[type]="toggleConfirmPassword.type"
266-
[formControl]="passwordComponentWithValidation.passwordConfirmationFormControl"
263+
[formControl]="passwordComponentWithConfirmation.passwordConfirmationFormControl"
267264
placeholder="Password">
268265

269266
<!-- password hint-->
270267
<mat-hint align="end" aria-live="polite">
271-
{{passwordToConfirm.value.length}} / {{passwordComponentWithValidation.max}}
268+
{{passwordToConfirm.value.length}} / {{passwordComponentWithConfirmation.max}}
272269
</mat-hint>
273270

274271
<!-- password error msgs-->
275-
<mat-error *ngIf="passwordComponentWithValidation2.passwordConfirmationFormControl.hasError('required')">
272+
<mat-error *ngIf="passwordComponentWithConfirmation.passwordConfirmationFormControl.hasError('required')">
276273
Password confirmation is required
277274
</mat-error>
278275
<mat-error
279-
*ngIf="passwordComponentWithValidation2.passwordConfirmationFormControl.hasError('notConfirmed')">
276+
*ngIf="passwordComponentWithConfirmation.passwordConfirmationFormControl.hasError('notConfirmed')">
280277
Password is not the same
281278
</mat-error>
282279

@@ -285,7 +282,6 @@ <h1>@angular-material-extensions/password-strength</h1>
285282
</mat-card-content>
286283

287284
</mat-card>
288-
<!-- </form>-->
289285
</div>
290286
</div>
291287

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {ChangeDetectionStrategy, Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
22
import {Title} from '@angular/platform-browser';
33
import {MatPasswordStrengthComponent} from '@angular-material-extensions/password-strength';
4-
import {FormControl} from '@angular/forms';
54

65
@Component({
76
selector: 'app-home',
@@ -12,11 +11,8 @@ import {FormControl} from '@angular/forms';
1211
})
1312
export class HomeComponent implements OnInit {
1413

15-
@ViewChild('passwordComponentWithValidation')
16-
passwordComponentWithValidation2: MatPasswordStrengthComponent;
17-
18-
passwordFormControl: FormControl;
19-
x: FormControl;
14+
@ViewChild('passwordComponentWithConfirmation')
15+
passwordComponentWithConfirmation: MatPasswordStrengthComponent;
2016

2117
constructor(private titleService: Title) {
2218
}
@@ -36,12 +32,12 @@ export class HomeComponent implements OnInit {
3632
console.log('home on init');
3733
this.titleService.setTitle('Home | mat-password-strength');
3834

39-
this.passwordComponentWithValidation2.passwordFormControl.valueChanges.subscribe(() => {
40-
console.log('passwordFormControl form control = ', this.passwordComponentWithValidation2.passwordFormControl);
35+
this.passwordComponentWithConfirmation.passwordFormControl.valueChanges.subscribe(() => {
36+
console.log('passwordFormControl form control = ', this.passwordComponentWithConfirmation.passwordFormControl);
4137
});
4238

43-
this.passwordComponentWithValidation2.passwordConfirmationFormControl.valueChanges.subscribe(() => {
44-
console.log('passwordFormControl form control = ', this.passwordComponentWithValidation2.passwordConfirmationFormControl);
39+
this.passwordComponentWithConfirmation.passwordConfirmationFormControl.valueChanges.subscribe(() => {
40+
console.log('passwordFormControl form control = ', this.passwordComponentWithConfirmation.passwordConfirmationFormControl);
4541
});
4642

4743
}

‎demo/src/assets/md/home/e1/ts.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {Component, OnInit} from '@angular/core';
88
})
99
export class HomeComponent implements OnInit {
1010

11+
showDetails: boolean;
12+
1113
ngOnInit() {
1214
}
1315

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {Component, OnInit} from '@angular/core';
88
})
99
export class HomeComponent implements OnInit {
1010

11+
showDetails: boolean;
12+
1113
ngOnInit() {
1214
}
1315

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```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>
26+
```

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
```typescript
2+
import {Component, OnInit, ViewChild} from '@angular/core';
3+
import {MatPasswordStrengthComponent} from '@angular-material-extensions/password-strength';
4+
5+
@Component({
6+
selector: 'app-home',
7+
templateUrl: './home.component.html',
8+
styleUrls: ['./home.component.scss']
9+
})
10+
export class HomeComponent implements OnInit {
11+
12+
@ViewChild('passwordComponentWithConfirmation')
13+
passwordComponentWithConfirmation: MatPasswordStrengthComponent;
14+
showDetails: boolean;
15+
16+
ngOnInit() {
17+
}
18+
19+
onStrengthChanged(strength: number) {
20+
console.log('password strength = ', strength);
21+
}
22+
}
23+
```

‎src/module/component/mat-password-strength/mat-password-strength.component.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -147,13 +147,15 @@ export class MatPasswordStrengthComponent implements OnInit, OnChanges {
147147
}
148148

149149
setRulesAndValidators(): void {
150+
this.validatorsArray = [];
151+
this.criteriaMap = new Map<Criteria, RegExp>();
150152
this.passwordConfirmationFormControl
151153
.setValidators(Validators.compose([
152154
Validators.required, this.matPasswordStrengthValidator.confirm(this.password)
153155
]));
154156
this.validatorsArray.push(Validators.required);
155157
if (this.enableLengthRule) {
156-
this.criteriaMap.set(Criteria.at_least_eight_chars, RegExp(`^.{${this.min},${this.max}$`));
158+
this.criteriaMap.set(Criteria.at_least_eight_chars, RegExp(`^.{${this.min},${this.max}}$`));
157159
this.validatorsArray.push(Validators.minLength(this.min));
158160
this.validatorsArray.push(Validators.maxLength(this.max));
159161
}
@@ -206,10 +208,7 @@ export class MatPasswordStrengthComponent implements OnInit, OnChanges {
206208
this._strength = requirements.filter(v => v).length * unit;
207209
// console.log('length = ', this._strength / unit);
208210
this.onStrengthChanged.emit(this.strength);
209-
this.passwordConfirmationFormControl
210-
.setValidators(Validators.compose([
211-
Validators.required, this.matPasswordStrengthValidator.confirm(this.password)
212-
]));
211+
this.setRulesAndValidators();
213212
}
214213

215214
reset() {

0 commit comments

Comments
 (0)