feat(package): only show the enabled rules in the info component #68

angular-material-extensions · Aug 1, 2018 · 4b82c63 · 4b82c63
1 parent 798ced0
commit 4b82c63
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/src/module/component/mat-password-strength-info/mat-password-strength-info.component.html b/src/module/component/mat-password-strength-info/mat-password-strength-info.component.html
@@ -1,7 +1,7 @@
 <mat-card>
   <mat-card-content fxLayout="column" fxLayoutAlign="start">
 
-    <div class="info-row">
+    <div class="info-row" *ngIf="passwordComponent.enableLowerCaseLetterRule">
       <div *ngIf="passwordComponent.containAtLeastOneLowerCaseLetter; then done else error">
       </div>
       <ng-template #done>
@@ -15,7 +15,7 @@
       </div>
     </div>
 
-    <div class="info-row">
+    <div class="info-row" *ngIf="passwordComponent.enableUpperCaseLetterRule">
       <div *ngIf="passwordComponent.containAtLeastOneUpperCaseLetter; then done else error">
       </div>
       <ng-template #done>
@@ -29,7 +29,7 @@
       </div>
     </div>
 
-    <div class="info-row">
+    <div class="info-row" *ngIf="passwordComponent.enableDigitRule">
       <div *ngIf="passwordComponent.containAtLeastOneDigit; then done else error">
       </div>
       <ng-template #done>
@@ -43,7 +43,7 @@
       </div>
     </div>
 
-    <div class="info-row">
+    <div class="info-row" *ngIf="passwordComponent.enableSpecialCharRule">
       <div *ngIf="passwordComponent.containAtLeastOneSpecialChar; then done else error">
       </div>
       <ng-template #done>
@@ -57,7 +57,7 @@
       </div>
     </div>
 
-    <div class="info-row">
+    <div class="info-row" *ngIf="passwordComponent.enableLengthRule">
       <div *ngIf="passwordComponent.containAtLeastEightChars; then done else error">
       </div>
       <ng-template #done>
@@ -67,7 +67,7 @@
         <mat-icon color="warn">error</mat-icon>
       </ng-template>
       <div>
-        <p>contains at least eight characters</p>
+        <p>contains at least {{passwordComponent.min}} characters</p>
       </div>
     </div>