core.js:5980 ERROR TypeError: Cannot read property 'isFirstChange' of undefined at MatPasswordStrengthComponent.ngOnChanges (angular-material-extensions-password-strength.js:454)

[renu1992]

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

[wadie]

Any update on this ? The opened PR #321 is going nowhere..