How can I use form validators in Angular?

How can I use form validators in Angular?

In Angular, you can use built-in validators like required, minLength, and maxLength. You can also create custom validators.

Can you show me an example of a custom validator?

Sure! Here's a simple custom validator that checks if the input 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 apply this validator to a form control?

You can apply the custom validator to a form control like this:

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

What if I want to add multiple validators?

You can add multiple validators by including them in an array:

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