ולידציה לאימות סיסמא - אנגולר

[שלוות נפש]

היי
אני משתמשת ב mat-stepper של אנגולר מטריאל.
יש לי step אחד של הכנסת סיסמא
ואחריו step של אימות סיסמא.
הוספתי ב ts ולידציה לאימות סיסמא באופן הבא:
this.fourFormGroup = new FormGroup({'fourCtrl': new FormControl('', [Validators.required, Validators.pattern('[0-9]{6,10}'), this.passwordValidators.bind(this)]) });
(ב- ngOnInit)
וזה לא נותן להתקדם לstep הבא גם אם הסיסמא תואמת.
מצרפת קטעי קוד רלוונטים- תודה!!
passwordValidators(password : FormControl): { [errorPassword: string]: boolean } { if (password.value != this.password1){ // console.log("לא תואם") return { errorPassword: true } } // console.log("תואם") return { errorPassword: false }; }
html:
<mat-step [stepControl]="thirdFormGroup" errorMessage="ערך סיסמא חסר/ לא תקין"> <form [formGroup]="thirdFormGroup"> <ng-template matStepLabel>סיסמא</ng-template> <mat-form-field appearance="fill"> <mat-label>הכנס סיסמא</mat-label> <input matInput [type]="hide ? 'password' : 'text'" formControlName="thirdCtrl"> <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide"> <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon> </button> </mat-form-field> <div> <button mat-button matStepperPrevious>הקודם</button> <button mat-button matStepperNext (click) = "clickPassword1()">הבא</button> </div> </form> </mat-step>

 

[kidinet]

מאד לר ברור
תעלי קוד מסודר

 

[שלוות נפש]

html:

<mat-step [stepControl]="fourFormGroup" errorMessage="ערך סיסמא לא תואם">
<form [formGroup]="fourFormGroup">
<ng-template matStepLabel>חזור על הסיסמא</ng-template>
<mat-form-field appearance="fill">
<mat-label>הכנס סיסמא</mat-label>
<input matInput [type]="hide ? 'password' : 'text'" formControlName="fourCtrl">
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>

<div>
<button mat-button matStepperPrevious>הקודם</button>
<button mat-button matStepperNext (click) = "clickPassword2()">הבא</button>
</div>
</form>
</mat-step>
ts:

ngOnInit( void {
this.fourFormGroup = new FormGroup({'fourCtrl': new FormControl('', [Validators.required, Validators.pattern('[0-9]{6,10}'), this.passwordValidators.bind(this)])
});

passwordValidators(password : FormControl { [errorPassword: string]: boolean } {
if (password.value != this.password1){
// console.log("לא תואם")
return { errorPassword: true }

}
// console.log("תואם")
return { errorPassword: false };
}​

 

[s976]

 

[שלוות נפש]

<mat-step [stepControl]="fourFormGroup" errorMessage="ערך סיסמא לא תואם">
      <form [formGroup]="fourFormGroup">
        <ng-template matStepLabel>חזור על הסיסמא</ng-template>
        <mat-form-field appearance="fill">
          <mat-label>הכנס סיסמא</mat-label>
          <input matInput [type]="hide ? 'password' : 'text'" formControlName="fourCtrl">
          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
            <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
          </button>
        </mat-form-field>
        
        <div>
          <button mat-button matStepperPrevious>הקודם</button>
          <button mat-button matStepperNext  (click) = "clickPassword2()">הבא</button>
        </div>
      </form>
    </mat-step>

ngOnInit(): void {
    
    this.fourFormGroup = new FormGroup({'fourCtrl': new FormControl('', [Validators.required, Validators.pattern('[0-9]{6,10}'), this.passwordValidators.bind(this)])
    });
    
  
  }

 

  
  passwordValidators(password : FormControl): { [errorPassword: string]: boolean } { 
    if (password.value != this.password1){
      // console.log("לא תואם")
      return { errorPassword: true }   
    }
// console.log("תואם")
    return { errorPassword: false };
  }