Custom Directive in Angular 17

Question

Hi

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

Ramco Ramco · Answer

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

Jayraj Chhaya · Answer

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: