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:
It has the same function as the picture: