Angular Custom Form Validators: Complete Guide - https://blog.angular-university.io/angular-custom-validators/

01.html

User Login Form:
<form [formGroup]="form">

    <input matInput type="email" name="email"
           placeholder="Email" formControlName="email">

    <input matInput type="password"
           placeholder="Password" formControlName="password">

  <button [disabled]="!form.valid">
    Login
  </button>

</form>

02.ts

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

   form = this.fb.group({
      email: ['', {
          validators: [
             Validators.required, 
             Validators.email
          ],
          updateOn: 'blur'
      }],
      password: [
          '', 
          [Validators.required, Validators.minLength(8),
           createPasswordStrengthValidator()
          ]
      ]
   });

  constructor(private fb: FormBuilder) {}

  get email() {
      return this.form.controls['email'];
  }

  get password() {
      return this.form.controls['password'];
  }

}

03.ts

 form = this.fb.group({
    password: [
        <form initial value>, 
        [ ... array of synchronous validators ...]
    ]
 });
          

04.ts

 form = this.fb.group({
    email: ['', {
        validators: [ ... array of synchronous validators ...],
        asyncValidators: [ ... array of asynchronous validators ...]
        updateOn:  'change' or 'blur' or 'submit'
    }],
    ...
 });
 

05.ts

import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';

export function createPasswordStrengthValidator(): ValidatorFn {
    return (control:AbstractControl) : ValidationErrors | null => {

        const value = control.value;

        if (!value) {
            return null;
        }

        const hasUpperCase = /[A-Z]+/.test(value);

        const hasLowerCase = /[a-z]+/.test(value);

        const hasNumeric = /[0-9]+/.test(value);

        const passwordValid = hasUpperCase && hasLowerCase && hasNumeric;

        return !passwordValid ? {passwordStrength:true}: null;
    }
}

06.ts

{
    passwordStrength: {
      hasUpperCase: true,
      hasLowerCase: true,
      hasNumeric: false
    }
}

07.ts

 form = this.fb.group({
    email: ...
    password: [
        '', 
        [ 
          Validators.required, 
          Validators.minLength(8),
          createPasswordStrengthValidator()
        ]
    ]
 });

08.html

<form #loginForm="ngForm" (ngSubmit)="login(loginForm, $event)">

    <input matInput type="email" name="email"
           ngModel
           #email="ngModel"
           required email minlength="3" maxlength="20"
           placeholder="Email">

    <input matInput type="password" name="password"
           required passwordStrength minlength="8"
           ngModel #password="ngModel"
           placeholder="Password">

  </mat-form-field>

  <button type="submit" [disabled]="!loginForm.valid">
    Login
  </button>

</form>

09.ts

import {Directive} from '@angular/core';
import {AbstractControl, NG_VALIDATORS, ValidationErrors, Validator} from '@angular/forms';
import {createPasswordStrengthValidator} from '../validators/password-strength.validator';

@Directive({
    selector: "[passwordStrength]",
    providers: [{
        provide: NG_VALIDATORS,
        useExisting:PasswordStrengthDirective,
        multi: true
    }]
})
export class PasswordStrengthDirective implements Validator {

    validate(control: AbstractControl): ValidationErrors | null {
        return createPasswordStrengthValidator()(control);
    }
}

10.ts

<input matInput type="password"
   placeholder="Password" formControlName="password">

<div class="field-message" *ngIf="password.errors?.passwordStrength">
    Your password must have lower case, upper case and numeric characters.
</div>
  

11.ts

<form [formGroup]="form">

    <input placeholder="Start date" formControlName="startAt">

    <input placeholder="End date" formControlName="endAt">

</form>

12.ts

import {FormGroup, ValidatorFn, Validators} from '@angular/forms';

export function creatDateRangeValidator(): ValidatorFn {
    return (form: FormGroup): ValidationErrors | null => {

        const start:Date = form.get("startAt").value;

        const end:Date = form.get("endAt").value;

        if (start && end) {
            const isRangeValid = (end.getTime() - start.getTime() > 0);

            return isRangeValid ? null : {dateRange:true};
        }

        return null;
    }
}

14.ts

    form = this.fb.group({
        startAt: [null, Validators.required],
        endAt: [null, Validators.required]
    }, {
        validators: [createDateRangeValidator()]
    });

15.html

Create User Form:
<form [formGroup]="form">

    <input matInput type="email" name="email"
           placeholder="Enter the new user email" formControlName="email" #email>
    
    <div class='field-message' *ngIf="email?.errors.userExists">
        An user with email {{email.value}} already exists.
    </div>

    <input matInput type="password"
           placeholder="Password" formControlName="password">
  
    <input matInput type="password"
           placeholder="Confirm Password" formControlName="confirmPassword">

  <button [disabled]="!form.valid">
    Create User
  </button>

</form>

16.ts

@Component({
  selector: 'login',
  templateUrl: './create-user.component.html',
  styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent {

   form = this.fb.group({
      email: ['', {
          validators: [
             Validators.required, 
             Validators.email
          ],
          asyncValidators: [userExistsValidator(this.user)]
          updateOn: 'blur'
      }],
      ....
   });

  constructor(private fb: FormBuilder, private user: UserService) {}

  get email() {
      return this.form.controls['email'];
  }

}

17.ts

import {AbstractControl, AsyncValidatorFn} from '@angular/forms';

export function userExistsValidator(user: UserService):AsyncValidatorFn  {
    return (control: AbstractControl) => {
        return user.findUserByEmail(control.value)
            .pipe(
                map(user => user ? {userExists:true} : null)
            );
    }
}