How can I create custom validators in Angular?

How can I create custom validators in Angular?

To create custom validators in Angular, you can define a function that returns a validation function. This function should return either null if the validation passes or an object with validation errors if it fails.

Can you show me an example of a custom validator?

Sure! Here's a simple example of a custom validator that checks if a control's value is a valid email:

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

export function emailValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const valid = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(control.value);
    return valid ? null : { 'invalidEmail': { value: control.value } };
  };
}

How do I use this validator in my form?

You can use the custom validator in your form by adding it to the form control like this:

this.form = this.fb.group({
  email: ['', [emailValidator()]]
});

What if I want to add multiple validators?

You can combine multiple validators by passing them as an array. For example:

this.form = this.fb.group({
  email: ['', [emailValidator(), Validators.required]]
});