I am attempting to display a message when the password does not meet the formGroup pattern.
Here is how my FormGroup is initialized:
this.signupForm = fb.group({
userName: ['', Validators.compose([Validators.required,Validators.pattern(/^\S*$/),Validators.pattern(`^[a-z0-9_-]{8,15}$`)])],
image:[''],
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', Validators.compose([Validators.required, EmailValidator.isValid])],
password: ['', Validators.compose([Validators.required,Validators.pattern(`^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$`)])],
confirm: ['', Validators.required]
}, {
validator: PasswordValidation.MatchPassword
});
For the HTML part:
<ion-item no-lines>
<ion-label floating>
<ion-icon name="lock"></ion-icon>Password</ion-label>
<ion-input formControlName="password" type="password"></ion-input>
<ion-icon class="alert" *ngIf="signupForm.get('password').hasError('pattern')" name="alert-outline" item-right></ion-icon>
</ion-item>
The issue I'm facing is that
signupForm.get('password').hasError('pattern')andsignupForm.get('password').hasError('required')are functioning correctly.signupForm.get('password').touched
Could someone help me identify where the problem lies?