Я на самом деле устал пытаться добиться чего-то очень простого. Я получил реактивную форму и просто хочу показать ошибку, если пароль не равен 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.