How to enforce that one date is bigger than the other in angular reactive form?

Question

I've the following reactive form:

  newTripForm = this.formBuilder.group({
    name: new FormControl('', Validators.compose([Validators.required, Validators.minLength(3)])),
    startDate: new FormControl('', Validators.required),
    endDate: new FormControl(''),
  });

How can I add a validator enforcing that the endDate is bigger than the startDate? Also, is there a way to check that the startDate and endDate are dates? I didn't found any validator?

Thank you very much(and sorry for the noob question)

Answer 1

If your control is a normal date input this will do the job and you can format the values if your controls are a custom types like ngBootstrap date picker "like in my case"

export class DateValidators {
  static greaterThan(startControl: AbstractControl): ValidatorFn {
    return (endControl: AbstractControl): ValidationErrors | null => {
      const startDate: Date = startControl.value;
      const endDate: Date = endControl.value;
      if (!startDate || !endDate) {
        return null;
      }
      if (startDate >= endDate) {
        return { greaterThan: true };
      }
      return null;
    };
  }
}

usage

const startControl = this.formBuilder.control('');
const endControl = this.formBuilder.control('', [DateValidators.greaterThan(startControl)]);