Question

我实际上已经厌倦了通过尝试来实现一件非常简单的事情。我得到一个响应式表格，只是想显示一个错误，如果密码强度不是100，那么不能满足所有要求。

我可以使用passwordComponent.strength直接访问强度，如果我显示它，它会动态变化。以div的形式显示。当输入字段为空时，仅显示错误。一旦输入字段中有一个字符，就不会显示错误。

 <mat-button-toggle #toggleDetails class="requirements" tabindex="-1"
   matTooltip="{{ 'REGISTRATION.PASSWORDREQUIREMENTS' | translate }}" matTooltipClass="tooltip"
   matTooltipPosition="below" [matTooltipShowDelay]="globals.showDelay.value"
   [matTooltipHideDelay]="globals.hideDelay.value">
   <mat-icon *ngIf="toggleDetails.checked">done_all</mat-icon>
   <mat-icon *ngIf="!toggleDetails.checked">done</mat-icon>
 </mat-button-toggle>

 <mat-form-field class="field-sizing">
   <input matInput (keydown)="onKeyDownSpace($event)" [maxlength]="globals.maxPasswordLength" required
     [type]="globals.hidePassword ? 'password' : 'text'"
     placeholder="{{ 'REGISTRATION.PASSWORD' | translate }}" #password formControlName="password"
     [ngClass]="{ 'is-invalid': f.password.touched && f.password.errors }" />
   <button tabindex="-1" mat-icon-button matSuffix (click)="globals.hidePassword = !globals.hidePassword"
     [attr.aria-label]="'Hide password'" [attr.aria-pressed]="globals.hidePassword">
     <mat-icon>{{globals.hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
   </button>
   <mat-hint style="color: red" *ngIf="capslockOn && f.password.touched" align="start" aria-live="polite">
     <strong>{{ 'CAPSLOCK' | translate }}</strong>
   </mat-hint>
   <mat-hint align="end" aria-live="polite">
     {{password.value.length}} / {{globals.maxPasswordLength}}
   </mat-hint>
   <mat-error class="invalid-feedback"
     *ngIf="f.password.touched && f.password.errors && f.password.errors.required">
     {{ 'REGISTRATION.PASSWORD' | translate }} {{ 'VALIDATION.REQUIRED' | translate }}
   </mat-error>
   <mat-error *ngIf="passwordComponent.strength !== 100">
     Weak
   </mat-error>

 </mat-form-field>

 <div>
   <p>Password's strength = {{passwordComponent.strength}} %100</p>
 </div>

 <div class="password-strength">
   <mat-password-strength #passwordComponent [min]="globals.minPasswordLength" [password]="password.value">
   </mat-password-strength>

   <mat-password-strength-info tabindex="-1" *ngIf="toggleDetails.checked" [enableScoreInfo]="true"
     [passwordComponent]="passwordComponent" [lowerCaseCriteriaMsg]="'LOWER_CASE_CRITERIA_MSG' | translate"
     [upperCaseCriteriaMsg]="'UPPER_CASE_CRITERIA_MSG'| translate"
     [digitsCriteriaMsg]="'DIGITS_CRITERIA_MSG'| translate"
     [specialCharsCriteriaMsg]="'SPECIAL_CHARS_CRITERIA_MSG' | translate"
     [minCharsCriteriaMsg]="'MIN_CHARS_CRITERIA_MSG' | translate">
   </mat-password-strength-info>
 </div>

我的简单想法是到达*ngIf，然后检查强度是否为100，并且如果触碰该字段是否可行，那很简单，但这不起作用。该字段的formControl仅包含required验证器。

Answer 1

对于您而言，您应该使用自定义验证器，这是正确的方法* ngIF检查密码强度值，但不要使表单无效。

要创建自定义验证器，您可以点击此链接 Custom validator Example

如果强度不是100，则Angular Password Strength Extension显示错误

1 个答案: