validation - 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)

question from:https://stackoverflow.com/questions/65869611/how-to-enforce-that-one-date-is-bigger-than-the-other-in-angular-reactive-form

Answer 1

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'