title: Sum form Controls in form Array angular
body: <p>I have my reactive form which looks something like this</p>
  
  <pre><code>&lt;form [formGroup]="addInvoiceForm" (submit)="onAddInvoiceFormSubmit()"&gt;
    &lt;div [formArrayName]="itemRows"&gt;
      &lt;div *ngFor="let itemrow of addInvoiceForm.controls.itemRows.controls; let i=index" [formGroupName]="i"&gt;
        &lt;input autocomplete="off" type="text" formControlName="itemqty"&gt;
        &lt;input autocomplete="off" type="text" formControlName="itemrate"&gt;
  
        &lt;!-- the input field below is to be summed --&gt;
        &lt;input autocomplete="off" type="text" formControlName="itemamt" [ngModel]="itemrow.get('itemqty').value * itemrow.get('itemrate').value"&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="button" (click)="addItemRow()"&gt;Add New Row&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I want to sum the itemamt of all the rows created by user and pass them into form data. Can someone help me, tell me how to sum all the itemamt fields in the form and show user side by side what's the total amount?</p>