How can I use directives with forms in Angular?

How can I use directives with forms in Angular?

You can use directives in Angular forms to enhance form controls, like validation and custom behaviors. Would you like an example?

Yes, please provide an example of a custom directive.

Sure! You can create a custom directive to validate an email input. Here's a simple example:

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';

@Directive({
  selector: '[appEmailValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true }]
})
export class EmailValidatorDirective implements Validator {
  validate(control: AbstractControl): { [key: string]: any } | null {
    const emailPattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
    return emailPattern.test(control.value) ? null : { 'invalidEmail': true };
  }
}

How do I apply this directive to a form control?

You can apply the directive in your template like this:

<input type="email" formControlName="email" appEmailValidator />

This will ensure that the email input is validated using your custom directive.