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)]);

Answer 2

The validators you have used so far are FormControl-validators. They validate a single FormControl. You can also write yourself a validator that validates a FormArray or a FormGroup. A validator would look something like this:

dateOrderValidator(formGroup: FormGroup): ValidationErrors | null {
  const startDate = formGroup.controls['startDate']?.value;
  const endDate = formGroup.controls['endDate']?.value;
  // validate date-strings
  // catch missing values
  if (Date.parse(startDate).getTime() >= Date.parse(endDate).getTime)) {
    // return an appropriate error
  }
}

FormBuilder

FormBuilder's main purpose is to save us some boilerplate. Instead of name: new FormControl(...) we can just write

name: ['initialValue', [<synchronous validators>], [<asynchronous validators]]

or even less (if we have no validators):

name: 'initialValue'