Failure to display password matching message and password repetition in Angular 16

40 Views Asked by At

For the registration form I wrote a function for password mismatch and repeating it, but the match or mismatch message is not displayed in the html component. please help me

register.componenet.ts :

InitForm(){
    this.registerForm=this.formBuilder.group({
      Email:['',[Validators.email,Validators.required]],
      Password:['',[Validators.required,Validators.minLength(3),Validators.maxLength(10)]],
      RePassword:['',[Validators.required,Validators.minLength(3),Validators.maxLength(10)]],
      KnowAs:['',[Validators.required,Validators.maxLength(200)]],
      City:['',[Validators.required,Validators.maxLength(200)]],
      Country:['',[Validators.required,Validators.maxLength(200)]],
      DateOfBirth:[''],
      Gender:['']
    },{
      Validators:[this.RePasswordValidators]
    });
  }


  RePasswordValidators(control: FormGroup):{PasswordNotMatch:boolean}
   {
    let password=control.controls['Password'].value;
    let rePassword=control.controls['RePassword'].value;
    return password == rePassword ? null : {PasswordNotMatch:true}
   }

register.component.html :


        <input [class.is-invalid]='registerForm.get("RePassword").errors && registerForm.get("RePassword").touched' 
         type="text" class="form-control w-100"  placeholder="Repeat the Password ..." formControlName="RePassword">
         <span *ngIf="registerForm.get('RePassword').hasError('required')" class="invalid-feedback invalid-message-fs">
          Confirm password is not entered.
        </span>
        <span *ngIf="registerForm.get('RePassword').hasError('minlength')" class="invalid-feedback invalid-message-fs">
          The minimum length of the entered must be 4 characters.
        </span>
        <span *ngIf="registerForm.get('RePassword').hasError('maxlength')" class="invalid-feedback invalid-message-fs">
          The maximum length of the entered must be 10 characters.        
        </span>
        <span *ngIf="registerForm.get('RePassword').hasError('PasswordNotMatch')" class="invalid-feedback invalid-message-fs">
          The entered value is not the same as the password.
        </span>

The image does not display the correct message:

enter image description here

It has the same function as the picture:

enter image description here

0

There are 0 best solutions below