//app.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
FormBuilder,
FormGroup,
ReactiveFormsModule,
Validators,
AbstractControl,
} from '@angular/forms';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, CommonModule, ReactiveFormsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'password-validator-app';
passwordForm: FormGroup;
constructor(private fb: FormBuilder) {
this.passwordForm = this.fb.group(
{
password: [
'',
[
Validators.required,
Validators.minLength(6),
this.hasUppercase,
this.hasNumber,
this.hasSpecialCharacter,
],
],
confirmPassword: ['', Validators.required],
},
{ validator: this.passwordMatchValidator }
);
}
// Custom validator to check if passwords match
passwordMatchValidator(form: FormGroup) {
const password = form.get('password')?.value;
const confirmPassword = form.get('confirmPassword')?.value;
if (password !== confirmPassword) {
return { passwordMismatch: true };
}
return null;
}
// Custom validator to check if the password contains at least one uppercase letter
hasUppercase(control: AbstractControl) {
const value = control.value;
if (value && !/[A-Z]/.test(value)) {
return { uppercase: true };
}
return null;
}
// Custom validator to check if the password contains at least one number
hasNumber(control: AbstractControl) {
const value = control.value;
if (value && !/\d/.test(value)) {
return { number: true };
}
return null;
}
// Custom validator to check if the password contains at least one special character
hasSpecialCharacter(control: AbstractControl) {
const value = control.value;
if (value && !/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
return { specialCharacter: true };
}
return null;
}
// Form Submit
onSubmit() {
if (this.passwordForm.valid) {
alert(`Form Submitted Successfully`);
} else {
alert('Please check the form for errors');
}
}
// check if a specific control has a specific error and if it was touched
hasError(controlName: string, errorName: string) {
return (
this.passwordForm.get(controlName)?.hasError(errorName) &&
this.passwordForm.get(controlName)?.touched
);
}
}