Динамически выполнять расчет после того, как форма становится действительной в Angular

Я использую Reactive Forms и пытаюсь динамически выполнять математические вычисления, как только formGroup становится действительным.

У меня есть кнопка, чтобы добавить больше групп форм с помощью formArray, и у меня есть еще одна кнопка, чтобы выполнить расчет при нажатии. Однако я хочу, чтобы расчет был выполнен и отображался после того, как все поля ввода для группы форм введены и действительны.

Я пытался использовать ngIf, чтобы проверить, действительна ли formGroup, затем вызвать функцию, передать ей номер индекса (для захвата необходимых элементов управления формой), а затем выполнить расчет:

HTML

<div>
   Sum: 
    <ng-container *ngIf = "roundInputs.get(roundCount + '')?.valid ? calculateHandicapBtnClick(roundCount) : null">
       <span *ngFor = "let total of roundTotal; let sumCount = index">
          <span *ngIf = "roundCount === sumCount">
            {{total}}
          </span>
            {{total}}
          </span>
     </ng-container>
</div>

ТС

  calculateHandicapBtnClick(roundNumber: number) {
    this.roundTotal = [];
    let tempArray = [];
    let eighteeenHoleScore = this.roundInputs.controls[roundNumber].get('eighteenHoleScore')?.value;
    let nineHoleScore = this.roundInputs.controls[roundNumber].get('nineHoleScore')?.value;
    let total = eighteeenHoleScore + nineHoleScore
    this.roundTotal.push(total);
    // this.roundTotal.splice(roundNumber, 0, total)
    // this.roundTotal.push(eighteeenHoleScore + nineHoleScore)

    // this.roundInputs.controls.forEach((control) => {
    //   eighteeenHoleScore = control.get('eighteenHoleScore')?.value
    //   nineHoleScore = control.get('nineHoleScore')?.value
    //   this.roundTotal.push(eighteeenHoleScore + nineHoleScore)

    // })
  }

Вот что у меня есть для настройки formGroups вместе с тем, как работает addRound():

get roundInputs(): FormArray{
    return <FormArray>this.roundForm.get('roundInputs')
  }

  ngOnInit(): void {
    this.roundForm = this.fb.group({
      roundInputs: this.fb.array([ this.buildRoundForm() ])
    })
  };

addRound() {
   this.roundInputs.push(this.buildRoundForm())
  }

Кажется, я не могу собрать общую сумму и отобразить ее на странице. В консоли я вижу, что мои журналы удваиваются после того, как форма становится действительной, и когда я выхожу из ввода, а затем щелкаю в другом месте на странице. Из того, что я прочитал, мне, вероятно, не следует вызывать функцию в HTML, так как обнаружение изменений приведет к ее запуску несколько раз (где, как если бы я привязал ее к btn, у меня не так много проблем) . Вы также можете видеть, что я пробовал различные другие вещи, которые закомментированы, такие как цикл по всем элементам управления формы или попытка склеить и поместить итог в определенную позицию в массиве (я использую массив значений, чтобы затем перебрать и заполните эти значения на странице)

Еще одна вещь, которую я читал, заключалась в том, чтобы, возможно, создать собственный канал, в котором он принимает и выполняет арифметические действия и отображает их на странице. Я также столкнулся с тем, что, возможно, что-то делал с ngOnInit или ngOnChanges или даже, возможно, пытался принудительно обнаружить изменения. Я действительно не нашел ничего, что работает, поэтому ищу какой-то вклад.

Вот скриншот приложения и то, что я пытаюсь сделать. Вы можете игнорировать кнопку «Рассчитать гандикап», поскольку я пытаюсь поэтапно отказаться от нее и заменить ее приведенным выше сценарием.