Сравнение суммы в реактивных формах в Angular

Прежде всего, вы не должны вызывать метод customValidator, как уже упоминалось @Boris Lobanov

Он говорит, что не может прочитать родителя неопределенного

Это потому, что когда angular создает от FormGroup до FormBuilder::group, он также вызывает валидаторы, но у текущей группы еще нет родителя. Родитель будет установлен только после FormArray::push.

Таким образом, решение может выглядеть так:

validator: this.customValidator
...

customValidator(group: any) {
  if (!group.parent ) {
      return;
  }
  ...

Я также запускаю проверку для всех строк при изменении applied_amount.

HTML

<input type="number" formControlName="applied_amount" (ngModelChange)="validateAllRows()">

ts

validateAllRows() {
  const rows = this.reportForm.get('rows') as FormArray;

  rows.controls.forEach(group => {
    group.updateValueAndValidity();
  })
}

Пример Ng-run

Другое решение почти такое же, как ваше:

validator: this.customValidator.bind(rows)
...

customValidator(this: FormArray, group: any) {
  if (group.controls.amount.value > this.parent.controls['applied_amount'].value) {
    return { out1: true }
  }
  return null;
}

Здесь я использую метод Function.prototype.bind для передачи FormArray непосредственно вашему валидатору.

Проблема с вашим кодом заключается в том, что вы передаете FormArray (строки) в валидатор, а не в группу.

Предлагаю переписать так:

initGroup() {
   let rows = this.reportForm.get('rows') as FormArray;
   rows.push(this.fb.group({
       expense_account: ['', Validators.required],
       description: ['', Validators.required],
       amount: ['', Validators.required],
   },{validator: this.customValidator})) // it will automatically be applied to the group
}

Вы можете добавить собственный валидатор. демо здесь --- › демонстрация валидатора

 form: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group(
      {
        high: [null, Validators.required],
        low: [null, Validators.required]
      },
      {
        validator: LowHighValidation
      }
    );
  }


const LowHighValidation: ValidatorFn = (formGroup: FormGroup) => {
  console.log(formGroup);
  const low = formGroup.get("low").value;
  const high = formGroup.get("high").value;
  let validation = null;
  if (low !== null && high !== null && low < high) {
    validation = {
      validation: true
    };
  }
  return validation;
};