如果强度不是100，则角度密码强度扩展显示错误

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