Things to do, we are going to implement an angular directive that is going to be linked to the password strength attribute. It works in the similar way if we compare with the default pre-built validators "minlength, required etc." we have been using with the input fields. For each of these validators, there is a angular directive that is getting applied here to the input field, Each of these custom directive is then going to have a validator function that is going to use to determine if the value of the field is valid or not.

Let's break this implementation into the multiple steps.

we are going to implement our validator function and after that we are going to use it to implement our password strength directive.

Let's start creating a validator function, for that we have to add one folder in the app with the name "validators" and then new file "passwordStrength.validator.ts"

In the above code, we have just created a function named as passwordStrengthValidator and its return type will be a ValidatorFn. The return will not be a validator function itself but a factory function that returns a function. As we know that the factory function returns an another function. Here also this Validator function will return another function which will accepts a parameter as a control of type Abstract Control. The return type of this function will be the ValidationError or null. ValidationError defines a map of errors returned from failed validator checks.

You may ask about this AbstractControl type and why we are using it as control type. Since, the control is going to be nothing but a form field control which will have all the characteristic as similar to angular form control. So, it will have value property, errors, setValue, patchValue etc. AbstractControl is the base class for the form controls which we use in Angular form. So it is a base class which represents each element in the form either it is single input field FormControl or group of fields FormGroup or array of fields FormArray. All of them inherits from this class. So this is Abstract(common) structure which will provide all the properties and methods a form control should have.

While building a custom validator we are using this AbstractControl type so it will give us  access to the all the existing behaviour(value, valid, invalid, errors, touched, dirty, setValue, patchValue etc.) of a angular form control.

we call it Abstract because we are not directly using it but we implement it for FormControl, FormGroup, FormArray.

Part 1 Here is the complete code 

import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";
export function passwordStrengthValidator(minLength: number = 8): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    if (!value) return null;
    const errors: { [key: string]: any } = {};
    if (value.length < minLength) {
      errors['minLength'] = {
        requiredLength: minLength,
        actualLength: value.length
      };
    }
    
    if (!/[A-Z]+/.test(value)) {
      errors['noUpperCase'] = true;
    }
    if (!/[a-z]+/.test(value)) {
      errors['noLowerCase'] = true;
    }
    if (!/[0-9]+/.test(value)) {
      errors['noNumeric'] = true;
    }
    // you can also add for special characters
    //!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/.test(value)
    return Object.keys(errors).length ? { ...errors, passwordStrength: true } : null; 
  }
}

Now, if we want we can directly use this validator inside the Reactive form of our component. This will be a synchronous validator. By the way we are using Template driven form but you can use it in the same way as we will be using here.

  ngOnInit() {
    this.myForm = new FormGroup({
      password: new FormControl('', [
        Validators.required,
        passwordStrengthValidator(8) // Use the validator with minLength 8
      ])
    });
  }

// in the html template file, add like this
 <div *ngIf="myForm.get('password').errors['noUpperCase']">Password must contain at least one uppercase letter.</div>

But as we know we are trying to create a custom validator which can be attached to the input field as a attribute. So we have to approach it in a different manner.

Part 2  - Implementing a custom validation directive.

 Now we are going to implement a custom validation directive for template driven form. This directive will be indirectly calling our password validator function for validation check. So it will work in a similar way like "required" directive on the input field.

Let's create a new folder with name "directives" and one new file with name "password-strength.directive.ts" in the same folder.

import { Directive } from "@angular/core";
import { AbstractControl, ValidationErrors, Validator } from "@angular/forms";
import { passwordStrengthValidator } from "../validators/passwordStrength.validator";
@Directive({
  selector: "[passwordStrength]"
})
export class PasswordStrengthDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    // passing the min length and the passing control to the output of it.
      return passwordStrengthValidator(8)(control)
  }
}

import { FormsModule, NgForm } from '@angular/forms';
import { PasswordStrengthDirective } from '../directives/password-strength.directive';
@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule, JsonPipe, CommonModule, PasswordStrengthDirective],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss',
})
export class LoginComponent {
  login(form: NgForm, submitEvent: Event) {
    const formValues = form.value;
  }
}

@Directive({
  selector: '[passwordStrength]',
  standalone: true,
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: PasswordStrengthDirective,
      multi: true,
    },
  ],
})
export class PasswordStrengthDirective implements Validator {
  constructor() {
  }
  validate(control: AbstractControl): ValidationErrors | null {
    // passing the min length and the passing control to the output of it.
    return passwordStrengthValidator(8)(control);
  }
}

export function matchFieldsValidator(field1: string, field2: string) {
  return (control: AbstractControl): ValidationErrors | null => {
    const value1 = control.get(field1)?.value;
    const value2 = control.get(field2)?.value;
    return value1 && value2 && value1 === value2 ? { matchFields: true } : null;
  };
}

// Form
form = this.fb.group({
  username: ['', Validators.required],
  password: ['', Validators.required]
}, { validators: matchFieldsValidator('username', 'password') });

import { AbstractControl, ValidationErrors } from '@angular/forms';
// this function will check username
export function noAdminValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value || '';
  if (value.toLowerCase() === 'admin') {
    return { noAdmin: true }; // returns Error if "admin" found
  }
  return null; // Valid hai to null
}

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
@Directive({
  selector: '[noAdmin]', // Is directive ko HTML mein use karenge
  providers: [
    { provide: NG_VALIDATORS, useExisting: NoAdminDirective, multi: true }
  ],
  standalone: true // Angular 19 mein standalone support
})
export class NoAdminDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return noAdminValidator(control); // Validation logic yaha call hota hai
  }
}

<form #myForm="ngForm">
  <input 
    type="text" 
    name="username" 
    ngModel 
    required 
    minlength="5" 
    noAdmin 
    #username="ngModel">
  <div *ngIf="username.errors?.['noAdmin']">Username cannot be 'admin'.</div>
  <div *ngIf="username.errors?.['minlength']">Username must be at least 5 characters.</div>
  <div *ngIf="username.errors?.['required']">Username is required.</div>
</form>

You can also use it in the reactive form

import { Component } from​'@angular/core';
import { FormBuilder,​Validators } from​'@angular/forms';

@Component({
  selector:​'app-my-form',
  template:​`
    <form [formGroup]="form">
      <input formControlName="username">
      <div ​*ngIf="form.get('username')?.hasError('noAdmin')">Username cannot be 'admin'.</div>
    </form>
  `,
  standalone:​true,
  imports:​[ReactiveFormsModule]
})

export ​class ​MyFormComponent {
  form = this.fb.group({
    username:​['',​[Validators.required, ​Validators.minLength(5), ​noAdminValidator]]
  });

  constructor(private​fb:​FormBuilder) {}
}