fix(package): add validators in runtime instead to create new formController

Author: AnthonyNahas

src/module/component/mat-password-strength/mat-password-strength.component.ts

@@ -54,28 +54,31 @@ export class MatPasswordStrengthComponent implements OnInit, OnChanges {
   private _color: string;
 
   ngOnInit(): void {
-    this.setRulesAndValidators();
+    setTimeout(this.setRulesAndValidators(), 100);
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.externalError && changes.externalError.firstChange) {
-      this._color = Colors.primary;
+    console.log('!changes.password.isFirstChange()', changes.password.isFirstChange());
+    if ((changes.externalError && changes.externalError.firstChange) || changes.password.isFirstChange()) {
+      console.log('ngOnChanges if');
       return;
-    }
-    if (changes.externalError && changes.externalError.currentValue) {
+    } else if (changes.externalError && changes.externalError.currentValue) {
+      console.log('ngOnChanges else if');
       this._color = Colors.warn;
       return;
+    } else {
+      console.log('ngOnChanges else');
+      this.password && this.password.length > 0 ?
+        this.calculatePasswordStrength() : this.reset();
     }
-    this.password && this.password.length > 0 ?
-      this.calculatePasswordStrength() : this.reset();
   }
 
   get strength(): number {
     return this._strength ? this._strength : 0;
   }
 
   get color(): string {
-
+    console.log('on color requested: ', this.strength);
     if (this._strength <= 20) {
       return Colors.warn;
     } else if (this._strength <= 80) {
@@ -139,8 +142,14 @@ export class MatPasswordStrengthComponent implements OnInit, OnChanges {
       this.criteriaMap.set(Criteria.at_least_one_special_char, RegExp(/^(?=.*?[" !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~"])/));
     }
 
-    this.passwordFormControl = new FormControl('',
-      [...this.validators.map(criteria => Validators.pattern(this.criteriaMap.get(criteria)))]);
+    this.passwordFormControl.setValidators(Validators.pattern(this.criteriaMap.get(Criteria.at_least_eight_chars)));
+
+    this.validators.map(criteria => {
+      this.passwordFormControl.setValidators(Validators.pattern(this.criteriaMap.get(criteria)));
+    })
+
+    // this.passwordFormControl = new FormControl('',
+    // [...this.validators.map(criteria => Validators.pattern(this.criteriaMap.get(criteria)))]);
   }
 
   calculatePasswordStrength() {