How can I handle complex form validations in Angular?

How can I handle complex form validations in Angular?

You can use Reactive Forms in Angular to manage complex validations. This allows you to create custom validators and manage form state effectively.

Can you give 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 when creating the form control like this:

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

What if I want to show error messages based on validation?

You can use Angular's built-in features to display error messages. Check the control's errors and display messages accordingly in your template.