Skip to content

Commit d45e2c9

Browse files
AnthonyNahasAnthonyNahas
committed
demo(app): fixed showdetails for passwrod component with validation feature
1 parent f9e4734 commit d45e2c9

File tree

3 files changed

+12
-92
lines changed

3 files changed

+12
-92
lines changed

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

Lines changed: 11 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -53,20 +53,24 @@ <h1>ngx-material-password-strength</h1>
5353
[password]="password.value">
5454
</ngx-material-password-strength>
5555

56+
<!--Password's strength info-->
5657
<ngx-material-password-strength-info
5758
*ngIf="showDetails"
5859
[passwordComponent]="passwordComponent">
5960
</ngx-material-password-strength-info>
61+
6062
</div>
6163
</mat-card-content>
6264
</mat-card>
6365

66+
<!--NGX-MATERIAL-PASSWORD-STRENGTH WITH VALIDATION AND FORM CONTROLLER-->
67+
6468
<mat-card fxFlex style="margin-top: 3rem">
6569
<mat-card-title>ngx-material-password-strength
6670
</mat-card-title>
6771
<mat-card-subtitle fxLayout="row" fxLayoutGap="10px">
6872
<mat-slide-toggle (change)="onSlideToggleChange($event)">Show Password</mat-slide-toggle>
69-
<mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle>
73+
<mat-slide-toggle [(ngModel)]="showDetails2">Show Password Details</mat-slide-toggle>
7074
</mat-card-subtitle>
7175

7276
<mat-card-content>
@@ -96,95 +100,12 @@ <h1>ngx-material-password-strength</h1>
96100
[password]="passwordWithValidation.value">
97101
</ngx-material-password-strength>
98102

99-
<mat-card *ngIf="showDetails" fxFlex fxLayout="row" fxLayoutAlign="center">
100-
<mat-card-content fxLayout="column" fxLayoutAlign="start">
101-
102-
<div fxLayout="row" fxLayoutGap="10px">
103-
<div *ngIf="passwordComponentWithValidation.containAtLeastOneLowerCaseLetter; then done else error">
104-
</div>
105-
<ng-template #done>
106-
<mat-icon color="primary">done</mat-icon>
107-
</ng-template>
108-
<ng-template #error>
109-
<mat-icon color="warn">error</mat-icon>
110-
</ng-template>
111-
<div>
112-
<p>contains at least one lower character</p>
113-
</div>
114-
</div>
115-
116-
<div fxLayout="row" fxLayoutGap="10px">
117-
<div *ngIf="passwordComponentWithValidation.containAtLeastOneUpperCaseLetter; then done else error">
118-
</div>
119-
<ng-template #done>
120-
<mat-icon color="primary">done</mat-icon>
121-
</ng-template>
122-
<ng-template #error>
123-
<mat-icon color="warn">error</mat-icon>
124-
</ng-template>
125-
<div>
126-
<p>contains at least one upper character</p>
127-
</div>
128-
</div>
129-
130-
<div fxLayout="row" fxLayoutGap="10px">
131-
<div *ngIf="passwordComponentWithValidation.containAtLeastOneDigit; then done else error">
132-
</div>
133-
<ng-template #done>
134-
<mat-icon color="primary">done</mat-icon>
135-
</ng-template>
136-
<ng-template #error>
137-
<mat-icon color="warn">error</mat-icon>
138-
</ng-template>
139-
<div>
140-
<p>contains at least one digit character</p>
141-
</div>
142-
</div>
143-
144-
<div fxLayout="row" fxLayoutGap="10px">
145-
<div *ngIf="passwordComponentWithValidation.containAtLeastOneSpecialChar; then done else error">
146-
</div>
147-
<ng-template #done>
148-
<mat-icon color="primary">done</mat-icon>
149-
</ng-template>
150-
<ng-template #error>
151-
<mat-icon color="warn">error</mat-icon>
152-
</ng-template>
153-
<div>
154-
<p>contains at least one special character</p>
155-
</div>
156-
</div>
157-
158-
<div fxLayout="row" fxLayoutGap="10px">
159-
<div *ngIf="passwordComponentWithValidation.containAtLeastEightChars; then done else error">
160-
</div>
161-
<ng-template #done>
162-
<mat-icon color="primary">done</mat-icon>
163-
</ng-template>
164-
<ng-template #error>
165-
<mat-icon color="warn">error</mat-icon>
166-
</ng-template>
167-
<div>
168-
<p>contains at least eight characters</p>
169-
</div>
170-
</div>
171-
172-
<div fxLayout="row" fxLayoutGap="10px">
173-
<div *ngIf="passwordComponentWithValidation.strength === 100; then done else error">
174-
</div>
175-
<ng-template #done>
176-
<mat-icon color="primary">done</mat-icon>
177-
</ng-template>
178-
<ng-template #error>
179-
<mat-icon color="warn">error</mat-icon>
180-
</ng-template>
181-
<div>
182-
<p>Password's strength = {{passwordComponentWithValidation.strength}} %100</p>
183-
</div>
184-
</div>
185-
186-
</mat-card-content>
187-
</mat-card>
103+
<!--Password's strength info-->
104+
<ngx-material-password-strength-info
105+
*ngIf="showDetails2"
106+
[passwordComponent]="passwordComponentWithValidation">
107+
</ngx-material-password-strength-info>
108+
188109
</div>
189110
</mat-card-content>
190111
</mat-card>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export class HomeComponent implements OnInit {
1212
password: string;
1313
inputType = 'password';
1414
showDetails: boolean;
15+
showDetails2: boolean;
1516
color = '';
1617

1718
constructor(private titleService: Title) {

‎src/module/component/ngx-material-password-strength/password-strength.component.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,6 @@ export class PasswordStrengthComponent implements OnInit, OnChanges {
5757

5858
this.passwordFormControl = new FormControl('',
5959
[...this.validators.map(criteria => Validators.pattern(this.criteriaMap.get(criteria)))]);
60-
61-
console.log('this.passwordFormControl', this.passwordFormControl.validator);
6260
}
6361

6462
ngOnInit(): void {

0 commit comments

Comments
 (0)