How to do simultaneous formControl validation

Question

I have a parent component with a form that has 2 date-time-picker components, which are formControls. These represent the startDate and endDate.

I also have 2 custom validator directives that I am using on these 2 form controls. One is checking if given input Date is less than the control's date. The other checks if given input Date is greater than control's date.

These 2 validators allow me to validate the following conditions for the startDate and endDate:

1. startDate and endDate must be in the future(later than now)
2. startDate must be before endDate

So, my issue is that when I update one of the dates, the validation only happens on the date I updated. For example:

1. I set startDate first to a valid future date.
2. I set endDate to before startDate. This makes endDate invalid.
3. I change startDate to a valid future date before endDate. I expect endDate to become valid even though it was startDate that changed.

My question is this: How do I elegantly make validity run on another control?

Template of parent component:

<form #projectForm="ngForm" novalidate class="row">

    <div class="form-group col-md-6">
      <label for="startDate">Start Date</label>
      <date-time-picker #startDate="ngModel" name="startDate" [(ngModel)]="project.startDate" [disabled]="isReadOnly" [dateLessThan]="project.endDate" [dateGreaterThan]="now"></date-time-picker>
      <div *ngIf="startDate.errors">
        <div [hidden]="startDate.valid" *ngIf="startDate.errors.dateLessThan" class="alert alert-danger">Start date should be before end date</div>
        <div [hidden]="startDate.valid" *ngIf="startDate.errors.dateGreaterThan" class="alert alert-danger">Date should be in the future</div>
      </div>
    </div>

    <div class="form-group col-md-6">
      <label for="endDate">End Date</label>
      <date-time-picker #endDate="ngModel" name="endDate" [(ngModel)]="project.endDate" [disabled]="isReadOnly" [dateGreaterThan]="maxDate()"></date-time-picker>
      <div *ngIf="endDate.errors">
        <div [hidden]="endDate.valid" *ngIf="endDate.errors.dateGreaterThan" class="alert alert-danger">End date is too early</div>
      </div>
    </div>
  </div>
</div>

date-less-that-validator.directive.ts:

import { Directive, forwardRef, Input } from '@angular/core';
import { NG_VALIDATORS, FormControl } from '@angular/forms';
import * as moment from 'moment';

/**
 * Directive to validate whether FormControl's date is less than input date
 */
@Directive({
  selector: '[dateLessThan][ngModel],[dateLessThan][formControl]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateLessThanValidatorDirective), multi: true }
  ]
})
export class DateLessThanValidatorDirective {

  validator: Function;

  constructor() { //If validating onEndDate, reverse the otherDate
      this.validator = this.dateLessThan();
  }

  @Input('dateLessThan') inputDate: Date; // Date comparing against.

  validate(c: FormControl) {
    return this.validator(c);
  }

  /**
 * Factory method that creates a function that accepts a form control.
 * Returns null if form is valid. Returns an object that contains error message if invalid.
 */
  dateLessThan() {
    return (c: FormControl) => {

      let controlDate = c.value;

      if (controlDate && this.inputDate) { //Only if both dates are set do we do validation
        if (moment(controlDate).diff(this.inputDate) > 0) {
          return {
            dateLessThan: 'Controls date is greater than given date'
          };
        }
      }
      return null;
    };
  }
}

date-greater-than-validator.directive.ts:

import { Directive, forwardRef, Input } from '@angular/core';
import { NG_VALIDATORS, FormControl } from '@angular/forms';
import * as moment from 'moment';

/**
 * Directive to validate whether FormControl's date is greater than input date
 */
@Directive({
  selector: '[dateGreaterThan][ngModel],[dateGreaterThan][formControl]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateGreaterThanValidatorDirective), multi: true }
  ]
})
export class DateGreaterThanValidatorDirective {

  validator: Function;

  constructor() { //If validating onEndDate, reverse the otherDate
      this.validator = this.dateGreaterThan();
  }

  @Input('dateGreaterThan') inputDate: Date; // Date comparing against.

  validate(c: FormControl) {
    return this.validator(c);
  }

  /**
 * Factory method that creates a function that accepts a form control.
 * Returns null if form is valid. Returns an object that contains error message if invalid.
 */
  dateGreaterThan() {
    return (c: FormControl) => {

      let controlDate = c.value;

      if (controlDate && this.inputDate) { //Only if both dates are set do we do validation
        if (moment(controlDate).diff(this.inputDate) < 0) {
          return {
            dateGreaterThan: 'Controls date is less than given date'
          };
        }
      }

      return null;
    };
  }
}

Answer 1

The behavior which you are observing is quite expected. Validation is triggered only for the controls which are being changed by user interaction.

You can approach the scenario in the following way:

• create custom validator for startDate|endDate. It will only validate whether current formControl value is in the future.
• create custom validator for the formGroup which wraps startDate|endDate. This way when any of the fields is changed you will be able to check whether start < end date.

Implementing two validators separates nicely the responsibilities and encapsulates domain logic in each validator.

I hope this makes sense to you.

Answer 2

My approach worked:

  private MaxCompareValidator(maxformControl: FormControl): ValidatorFn {
    let subscribe = false;
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        if (!subscribe) {

            subscribe = true;
            maxformControl.valueChanges.subscribe(() => {
                control.updateValueAndValidity();
            });
        }

        if (!maxformControl || !maxformControl.value)
            return { dateCompareInvalid: false };
        if (control.value && new Date(control.value) > new Date(maxformControl.value)) {
            return { dateCompareInvalid: true };
        }
        return { dateCompareInvalid: false };
    };
}

 var newServiceStartTimeCtrl = new FormControl();
                            newServiceStartTimeCtrl.setValue(activity.startDate.toISOString());

                            var newServiceEndTimeCtrl = new FormControl();
                            newServiceEndTimeCtrl.setValue(activity.endDate.toISOString());

                            newServiceStartTimeCtrl.setValidators([Validators.required, this.MaxCompareValidator(newServiceEndTimeCtrl)]);
                            newServiceEndTimeCtrl.setValidators([Validators.required]);