Добавление formcontrol, formgrops и formarray в дублированный HTML angular

Вы можете объявить свою FormGroup, как показано ниже.

myForm = new FormArray([]);
addRow() {
    const group = new FormGroup({
      firstName: new FormControl("", [Validators.required]),
      value: new FormControl("", [Validators.required])
    });
    this.myForm.push(group);
}

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

<div *ngFor="let form of myForm.controls;">
    <ng-container [formGroup]="form">
      <div>
        <label>Name</label
        ><input type="text" required formControlName="firstName" />
      </div>
      <span class="text-danger" *ngIf="isInValidFormControl(form,'firstName')">
        Name is required
      </span>
      <div>
        <label>Value</label><input type="text" formControlName="value" />
      </div>
    </ng-container>
</div>

Ваша проверка относительно общего количества будет выглядеть, как показано ниже.

isValidTotal() {
    var values = this.myForm.controls.map((x) =>
      x ? Number(x.value.value) : 0
    );
    let sumTotal = values.reduce((a, b) => a + b);
    return sumTotal <= this.total;
}

И вы можете вызвать это из шаблона вот так.

  <button (click)="addRow()" [disabled]="!isValidTotal()">Add</button>
  <button (click)="submit()" [disabled]="!isValidTotal()">Submit</button>
  <div *ngIf="!isValidTotal()">
    <p>{{errorMessage}}</p>
  </div>

Рабочая песочница

https://codesandbox.io/s/formarraydynamic-rqdhc?file=/src/app/app.component.html.