Angular 17 – Как добавить errorStateMatcher в массив форм, но тот, который пересекает группы форм по последовательным индексам

приведенный ниже код работает,

https://stackblitz.com/edit/stackblitz-starters-wnququ?file=src%2Fmain.html

Но мне нужно сделать еще один шаг вперед и убедиться, что дата окончания FormGroup по индексу (x) не больше и не равна начальной дате FormGroup по индексу (x + 1) - (все внутри массива основной формы ).

Знаешь, как я это делаю?

Это то, что у меня есть на данный момент (см. также демо-версию Stackblitz)

Валидаторы

В настоящее время мой валидатор даты выглядит так:

// VALIDATORS
public startDateAfterEndDateMatcher: ValidatorFn =
  this.dateComparisonValidator(
    'startDate',
    'endDate',
    'startDateAfterEndDate',
    (date1: Date, date2: Date) => date1 && date2 && date1 > date2
  );

private dateComparisonValidator(
  fieldName1: string,
  fieldName2: string,
  errorName: string,
  condition: (value1: any, value2: any) => boolean
): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const field1Value = control.get(fieldName1)?.value;
    const field2Value = control.get(fieldName2)?.value;
    console.info('condition', condition(field1Value, field2Value));
    if (condition(field1Value, field2Value)) {
      const errors: ValidationErrors = {};
      errors[errorName] = true;
      return errors;
    }
    return null;
  };
}

Структура формы

Структура формы на данный момент выглядит следующим образом. Валидатор формы добавляется к каждому объекту formGroup (но я бы хотел сейчас попробовать проверить все formGroups - что я не знаю, как это сделать)

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

Сопоставитель состояний ошибок

Мой сопоставитель состояний ошибок (который прикрепляется к каждой группе форм в массиве форм) выглядит так:

// ERROR MATCHER
export class SingleErrorStateMatcher implements ErrorStateMatcher {
  private errorCode: string;
  public constructor(errorCode: string, private formGroup?: FormGroup) {
    this.errorCode = errorCode;
  }

  isErrorState(
    control: FormControl | null,
    formGroup: FormGroupDirective | NgForm | null
  ): boolean {
    let parentFormGroup = this.formGroup ?? formGroup;
    console.info('parentFormGroup', parentFormGroup);

    return (
      !!(parentFormGroup?.dirty || parentFormGroup?.touched) &&
      !!(parentFormGroup?.invalid && parentFormGroup?.hasError(this.errorCode))
    );
  }
}

Инициализация

Они помещаются только внутрь ngOnInit (так что это не полностью динамично в том смысле, что я еще не думал о том, что произойдет, если я захочу добавить еще одну пару дат или если я удалю/откатываю пару дат... - но пока это нормально)

// create error state matchers
for (let i = 0; i < this.datesArray.length; i++) {
  this.startDateAfterEndDateMatchers.push(
    new SingleErrorStateMatcher(
      'startDateAfterEndDate',
      this.datesInfo.controls['datesArray'].get(`${i}`) as FormGroup
    )
  );
}