Custom Directive in Angular 17

Ramco Ramco

How to use below code to compare 2 dates using custom directive. Where i should write the below code so it can be used in any component where Data validation of this type is required.

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;
    }
}

Thanks

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ramco Ramco2y ago
Hi Jayraj

Where these 2 fields are to be given.

startAt , endAt. Can these 2 variables can be passed from any component or these are Static.
```
const start: Date = control.get('startAt').value;
    const end: Date = control.get('endAt').value;
```
Thanks
+1

Jayraj Chhaya2y ago

To implement date comparison using a custom directive in Angular, you can create a directive that utilizes the provided date range validation logic. You should place this code in a separate TypeScript file, typically named something like date-range.validator.ts.

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

@Directive({
  selector: '[appDateRangeValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: DateRangeValidatorDirective, multi: true }]
})
export class DateRangeValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const start: Date = control.get('startAt').value;
    const end: Date = control.get('endAt').value;

    if (start && end) {
      const isRangeValid = end.getTime() - start.getTime() > 0;
      return isRangeValid ? null : { dateRange: true };
    }

    return null;
  }
}

You can then use this directive in your component's template by adding the appDateRangeValidator attribute to the form element that contains the date inputs you want to validate: