Using Angular 10 and Password Validator Service
static password(control: AbstractControl) {
// {6,100} - Check if password is between 6 and 100 characters
// (?=.*[0-9]) - Ensure at least one number is present in the string
if (control.value.match(/^(?=.*[0-9])[a-zA-Z0-9!@#$%^&*]{6,100}$/)) {
return null;
} else {
return { invalidPassword: true };
}
}
Working Code
this.loginForm = this.formBuilder.group({
username:'' ,
password: ['', [ValidationService.password]]
});
Not working Code :
this.loginForm = this.formBuilder.group({
username:'' ,
password: [null, [ValidationService.password]]
});
The issue occurred after using null instead of an empty string. Please advise on how to fix it.
https://i.stack.imgur.com/9BHcH.png
EDIT :
HTML
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-lock"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" autocomplete="current-password"
formControlName="password" required>
</div>
<div class="form-group row">
<div class="col-md-9">
<ar-validation-message [control]="loginForm.controls.password"></ar-validation-message>
</div>
</div>