Angular 2 form validations start date <= end date

Question

I\'m trying to add validations such that the end date can\'t be before the start date. Unfortunately I have no idea how to do that, and I didn\'t find any helpful advice in

Answer 1

Based on the answer of santiagomaldonado I have created a generic ValidatorFn that can be used in multiple Reactive Forms with a dynamic return value.

export class DateValidators {
    static dateLessThan(dateField1: string, dateField2: string, validatorField: { [key: string]: boolean }): ValidatorFn {
        return (c: AbstractControl): { [key: string]: boolean } | null => {
            const date1 = c.get(dateField1).value;
            const date2 = c.get(dateField2).value;
            if ((date1 !== null && date2 !== null) && date1 > date2) {
                return validatorField;
            }
            return null;
        };
    }
}

Import the validator and use it like this in your formgroup validators.

    this.form = this.fb.group({
        loadDate: null,
        deliveryDate: null,
    }, { validator: Validators.compose([
        DateValidators.dateLessThan('loadDate', 'deliveryDate', { 'loaddate': true }),
        DateValidators.dateLessThan('cargoLoadDate', 'cargoDeliveryDate', { 'cargoloaddate': true })
    ])});

Now you can use the validation in HTML.

Load date must be before delivery date