Password Pattern in Ionic forms - ionic-framework

Question

Iam facing a problem in setting the password pattern as "Password must contain atleast 8 letters one lowercase and one uppercase letter one digit and one special character". I already used validators pattern but its not working.
Below is my code:
html file:
<ion-content>
<div style="margin: 30px">
<ion-title class="ion-text-center" >Register</ion-title>
<form [formGroup]="loginForm">
<ion-item>
<ion-label position="floating">First Name*</ion-label>
<ion-input formControlName="fname" type="text" ></ion-input>
</ion-item>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.fname">
<div class="error-message" *ngIf="loginForm.get('fname').hasError(error.type) && (loginForm.get('fname').dirty || loginForm.get('fname').touched)">
{{ error.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating" >Last Name*</ion-label>
<ion-input formControlName="lname" type="text" ></ion-input>
</ion-item>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.lname">
<div class="error-message" *ngIf="loginForm.get('lname').hasError(error.type) && (loginForm.get('lname').dirty || loginForm.get('lname').touched)">
{{ error.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating" >Email Id*</ion-label>
<ion-input formControlName="email" type="text" ></ion-input>
</ion-item>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.email">
<div class="error-message" *ngIf="loginForm.get('email').hasError(error.type) && (loginForm.get('email').dirty || loginForm.get('email').touched)">
{{ error.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating" >Password*</ion-label>
<ion-input formControlName="password" type="password" ></ion-input>
</ion-item>
<div class="error-messages">
<ng-container *ngFor="let error of error_messages.password">
<div class="error-message" *ngIf="loginForm.get('password').hasError(error.type) && (loginForm.get('password').dirty || loginForm.get('password').touched)">
{{ error.message }}
</div>
</ng-container>
</div>
<br>
<div>
<ion-button [disabled]="!loginForm.valid" expand="full">Signup</ion-button>
</div>
.ts file:
import { Component, OnInit } from '#angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '#angular/forms';
#Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
loginForm: FormGroup;
error_messages = {
'fname': [
{ type: 'required', message: 'First Name is required.'},
],
'lname': [
{ type: 'required', message: 'Last Name is required.'}
],
'email': [
{ type: 'required', message: 'Email is required.'},
{ type: 'required', message: 'please enter a valid email address.'}
],
'password': [
{ type: 'required', message: 'password is required.'},
{ type: 'pattern', message: 'Password must be contain atleast 8 letters one lowercase and one uppercase letter one digit and one special character.'}
],
}
constructor(
public formBuilder: FormBuilder
) {
this.loginForm = this.formBuilder.group({
fname: new FormControl('', Validators.compose([
Validators.required
])),
lname: new FormControl('', Validators.compose([
Validators.required
])),
email: new FormControl('', Validators.compose([
Validators.required,
])),
password: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(8),
Validators.maxLength(30),
Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$')
])),
});
}
ngOnInit() {
}
}
Enter password should contain atleast 8 charecters, one upper case, one lower case, one numner and one special charecter.
Pleasehelp me on this.
thank you.

Answer 1

html .file
<ion-item>
<ion-label position="floating">
<img src="../assets/icon/key-icon.png"/>
<!-- <ion-icon name="mail" mode="ios" color="primary" "></ion-icon> -->
Password
</ion-label>
<ion-input [type]="passwordType" formControlName="password"></ion-input>
<ion-icon name="eye" [color]="passwordShown === true ? 'primary' : 'light'" slot="end" (click)="togglePassword()"></ion-icon>
</ion-item>
<ion-item no-padding lines="none" class="validator-error"
*ngIf="registration_form.controls.password.hasError('required') && registration_form.controls.password.touched">
<p>Please Enter a Password!</p>
</ion-item>
<ion-item no-padding lines="none" class="validator-error"
*ngIf="registration_form.controls.password.hasError('minlength') && registration_form.controls.password.touched">
<p>The password needs at least 8 characters.</p>
</ion-item>
<ion-item no-padding lines="none" class="validator-error"
*ngIf="registration_form.controls.password.hasError('pattern') && registration_form.controls.password.touched">
<p>Please Enter One Upper Case and One Lower Case, One Spacial Characters and One Number</p>
</ion-item>
ts.file
password: [null, Validators.compose([
Validators.required,
Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&].{7,}'),
Validators.minLength(8)
])]

Answer 2

Just add the below in the validators pattern
Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&].{7,}'),