<ul class="visual-password-validator list-unstyled mt-2" aria-hidden="true">
  <!-- PRISTINE -->
  <ng-container *ngIf="control.pristine">
    <!-- built in validator - minlength -->
    <li class="visual-password-validator__item small">
      {{ 'Validation.VarNoMinLength' | translate: { param: passwordMinLength } }}
    </li>

    <!-- custom validators -->
    <li class="visual-password-validator__item small" *ngFor="let customValidatorArray of customValidators">
      {{ 'Validation.' + (customValidatorArray[1] | capitalizeFirstLetter) | translate }}
    </li>
  </ng-container>

  <!-- TOUCHED or DIRTY -->
  <ng-container *ngIf="!control.pristine">
    <!-- built in validator - minlength -->
    <li
      class="visual-password-validator__item small"
      [ngClass]="{
        'visual-password-validator__item--danger': control.value.length < passwordMinLength,
        'visual-password-validator__item--success': !control.errors || control.value.length >= passwordMinLength,
      }">
      {{ 'Validation.VarNoMinLength' | translate: { param: passwordMinLength } }}
    </li>

    <!-- custom validators -->
    <li
      class="visual-password-validator__item small"
      *ngFor="let customValidatorArray of customValidators"
      [ngClass]="{
        'visual-password-validator__item--danger': control.errors && control.errors[customValidatorArray[1]],
        'visual-password-validator__item--success':
          !control.errors || (control.errors && !control.errors[customValidatorArray[1]]!),
      }">
      {{ 'Validation.' + (customValidatorArray[1] | capitalizeFirstLetter) | translate }}
    </li>
  </ng-container>
</ul>
