Description
Bug Report or Feature Request (mark with an x)
- [ ] bug report -> please search issues before submitting
- [ ] feature request
OS and Version?
Versions
@angular-devkit/architect 0.1100.7
@angular-devkit/build-angular 0.1100.7
@angular-devkit/core 11.0.7
@angular-devkit/schematics 11.2.10
@angular/cdk 10.2.7
@angular/cli 11.2.10
@angular/material 10.2.7
@schematics/angular 11.2.10
@schematics/update 0.1102.10
rxjs 6.5.5
typescript 4.0.7
Repro steps
on page reload i have created a function to get some validation from api and then on page load everytime it shows error:
core.js:5980 ERROR TypeError: Cannot read property 'isFirstChange' of undefined
at MatPasswordStrengthComponent.ngOnChanges (angular-material-extensions-password-strength.js:454)
after that if i input some data in that field then it shows below error:
core.js:5980 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
The log given by the failure
Desired functionality
error should not come on page load
Mention any other details that might be useful
i am sharing my use case :
html:
<mat-password-strength #passwordComponent
[max]="PasswordMax"
[min]="PasswordMin"
(onStrengthChanged)="onStrengthChanged($event)"
[password]="password.value"
[enableLengthRule]="IsPasswordLength"
[enableLowerCaseLetterRule]="IsLowercase"
[enableUpperCaseLetterRule]="IsUpperCase"
[enableDigitRule]="IsDigit"
[enableSpecialCharRule]="IsSpecialCharector"
[customValidator]="pattern"
>
<div class="row">
<div class="col l12 m12 s12 posRel">
<mat-icon *ngIf="showDetails" (click)="toggleInfo()" class="closeIconPswd" color="warn">cancel</mat-icon>
<mat-password-strength-info class="infoHeigth" *ngIf="showDetails"
[lowerCaseCriteriaMsg]="'label_lowerCaseCriteriaMsg'|translate"
[upperCaseCriteriaMsg]="'label_upperCaseCriteriaMsg'|translate"
[digitsCriteriaMsg]="'label_digitsCriteriaMsg'|translate"
[specialCharsCriteriaMsg]="'label_specialCharsCriteriaMsg'|translate"
[minCharsCriteriaMsg]="('label_errorminreqired'|translate)+ passwordComponent.min +('label_characters'|translate)"
[customCharsCriteriaMsg]="'label_CustomMsg'|translate"
[passwordComponent]="passwordComponent">
</mat-password-strength-info>
</div>
</div>
ts. file
/***variable decalaration **************/
showDetails: boolean;
pattern = new RegExp(/(?=.[a-z])(?=.[A-Z])(?=.[0-9])(?=.[@#$^&+=])(?!.[%-'"])/);
PasswordMin: number
PasswordMax=30;
IsPasswordLength=true;
IsUpperCase=true;
IsLowercase=true;
IsSpecialCharector=true;
IsDigit=true;
Strength=0;
then i have called a function in ngOninit to get the validation data form api response and set variables as shown in html part. this error occur on every page where i have implemented this lib