This works on a simple form, with a single start and end date, but now the form I have is dynamic so has multiple pairs of start and end dates, so I’ve had to use a Form Array.

Here is the structure, but now I can’t get the errorMatchers, or the validation on each FormGroup (inside the FormArray) to work

/* error state matchers */
  readonly startDateAfterEndDateMatchers: SingleErrorStateMatcher[] = [];

  /* lifecycle hooks */
  protected ngOnInit(): void {
    // initialisation
    this.initFormGroup();
    this.formGetters = this.initFormGetters(this.datesInfo);

    // create error state matchers
    for (let i = 0; i < this.datesArray.length; i++) {
      this.startDateAfterEndDateMatchers.push(
        new SingleErrorStateMatcher('startDateAfterEndDate')
      );
    }
  }

  // INITIALISE FORM
  private initFormGroup() {
    this.datesInfo = this.formBuilder.group({
      datesArray: this.formBuilder.array(
        (this.datesArray || []).map((_) =>
          this.formBuilder.group(
            {
              startDate: [
                '',
                {
                  nonNullable: true,
                  validators: [Validators.required],
                },
              ],
              endDate: [
                '',
                {
                  validators: [],
                },
              ],
            },
            { validators: [this.startDateAfterEndDateMatcher] }
          )
        )
      ),
    });
  }

Here is the stackblitz too (it uses Angular Material 2 & 3 components)
Any help would be appreciated: https://stackblitz.com/edit/stackblitz-starters-ss9qeg?file=src%2Fmain.ts

Thanks in advance,

ST