How to calculate the sum of all values in a FormArray in Angular

Question

How to calculate the sum of all values in a FormArray in Angular

I am trying to retrieve the input values from each row and then calculate the sum of these rows.

Here is my HTML code:

<ng-container formArrayName="cap_values">
    <tbody *ngFor="let item of capValues.controls; let i=index" [formGroupName]="i">
        <tr>
            <td class="freeze-first-col"><input type="text" (blur)="getName(item.value.name)" formControlName="name"></td>
            <td><input type="number" formControlName="fdnTotalShares"></td>
        </tr>
    </tbody>
</ng-container>

This is how my .ts file looks like:

ngOnInit() {
  this.form = this.fb.group({
    cap_values: this.fb.array([this.fb.group({
      name: '',
      fdnTotalShares: '',
    }
    )])
  })
}

I'm looking for a way to loop through each value in the array and calculate the total sum. I've heard about using .valueChanges, but I'm still not sure how to implement it properly.

angular typescript angular-reactive-forms

Answer 1

Answer №1

There are several ways to achieve this task, here are a few options:

Method 1:

get sumValues(): FormArray {
    return this.form.get('sum_values') as FormArray;
}

calculateSum() {
    this.total = this.sumValues.value.reduce((previous, current) => previous + +current.fdnTotalShares, 0);
    // OR
    // this.total = this.sumValues.getRawValue().reduce((previous, current) => previous + +current.fdnTotalShares, 0);
}

Note the use of the + sign in +current.fdnTotalShares. This is intentional to ensure proper addition of numbers (assuming fdnTotalShares will always be numeric) instead of string concatenation.

Method 2:

this.total = 0;
this.sumValues.value.forEach(item => {
      this.total += +item.fdnTotalShares;
});

If needed, you can replace value with getRawValue() for computations that involve disabled controls.

Here is a stackblitz example illustrating this approach (including the impact of enabled and disabled controls).

UPDATE: Responding to your query in the comments, here's another example similar to the sum calculation mentioned earlier:

multiplyAndSave() {
    const productResult = this.sumValues.value.reduce((previous, current) => previous * +current.fdnTotalShares, 1);
    // Provided the "formControlName" for the input storing the multiplication result is 'multiplyResult'
    this.form.get('multiplyResult').setValue(productResult);
    // Alternatively, you can use "patchValue" method instead of "setValue"
    // this.form.get('multiplyResult').patchValue(productResult);
}

I have also updated the stackblitz example to demonstrate this operation.

Trust this explanation clarifies things for you.

Answer 2

There are several ways to achieve this task, here are a few options:

Method 1:

get sumValues(): FormArray {
    return this.form.get('sum_values') as FormArray;
}

calculateSum() {
    this.total = this.sumValues.value.reduce((previous, current) => previous + +current.fdnTotalShares, 0);
    // OR
    // this.total = this.sumValues.getRawValue().reduce((previous, current) => previous + +current.fdnTotalShares, 0);
}

Note the use of the + sign in +current.fdnTotalShares. This is intentional to ensure proper addition of numbers (assuming fdnTotalShares will always be numeric) instead of string concatenation.

Method 2:

this.total = 0;
this.sumValues.value.forEach(item => {
      this.total += +item.fdnTotalShares;
});

If needed, you can replace value with getRawValue() for computations that involve disabled controls.

Here is a stackblitz example illustrating this approach (including the impact of enabled and disabled controls).

UPDATE: Responding to your query in the comments, here's another example similar to the sum calculation mentioned earlier:

multiplyAndSave() {
    const productResult = this.sumValues.value.reduce((previous, current) => previous * +current.fdnTotalShares, 1);
    // Provided the "formControlName" for the input storing the multiplication result is 'multiplyResult'
    this.form.get('multiplyResult').setValue(productResult);
    // Alternatively, you can use "patchValue" method instead of "setValue"
    // this.form.get('multiplyResult').patchValue(productResult);
}

I have also updated the stackblitz example to demonstrate this operation.

Trust this explanation clarifies things for you.

Answer 3

Answer №2

Utilize the valueChanges Observable to accomplish this task.

In the component, after creating the form, subscribe to the valueChanges within the array named cap_values.

import { Subscription } from 'rxjs';

total: number = 0;
subscription: Subscription;

ngOnInit() {
    // Form creation logic goes here

    this.subscription = this.capValues.valueChanges.subscribe(data => {
        this.total = data.reduce((a,b) => a + +b.fdnTotalShares, 0)
    });
}

get capValues() {
    return this.form.get('cap_values') as FormArray;
}

To display the total in your template dynamically based on changes in the fdnTotalShares input, simply use {{total}}.

Make sure to unsubscribe from the valueChanges to prevent memory leaks. This is handled by using the subscription variable introduced earlier in the code snippet above.

ngOnDestroy() {
    this.subscription.unsubscribe();
}

Check out a basic implementation example on StackBlitz.

Answer 4

Utilize the valueChanges Observable to accomplish this task.

In the component, after creating the form, subscribe to the valueChanges within the array named cap_values.

import { Subscription } from 'rxjs';

total: number = 0;
subscription: Subscription;

ngOnInit() {
    // Form creation logic goes here

    this.subscription = this.capValues.valueChanges.subscribe(data => {
        this.total = data.reduce((a,b) => a + +b.fdnTotalShares, 0)
    });
}

get capValues() {
    return this.form.get('cap_values') as FormArray;
}

To display the total in your template dynamically based on changes in the fdnTotalShares input, simply use {{total}}.

Make sure to unsubscribe from the valueChanges to prevent memory leaks. This is handled by using the subscription variable introduced earlier in the code snippet above.

ngOnDestroy() {
    this.subscription.unsubscribe();
}

Check out a basic implementation example on StackBlitz.

Answer 5

Answer №3

Iterating through form controls is a common task

let sum = 0;
form.elements.forEach(item => {
  sum += item.quantity.value;
})

Use console log to ensure the correct form control is being accessed

Answer 6

Iterating through form controls is a common task

let sum = 0;
form.elements.forEach(item => {
  sum += item.quantity.value;
})

Use console log to ensure the correct form control is being accessed

Answer 7

Answer №4

Attempting a Solution Here

 console.log(this.form.length);
 console.log(this.form.value);

Answer 8

Attempting a Solution Here

 console.log(this.form.length);
 console.log(this.form.value);

How to calculate the sum of all values in a FormArray in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Querying multiple attributes in express-restify-mongoose

Why is this chip-list not functioning properly in my Angular 14 and Angular material application?

Communicating Data Between Controllers in Node.js

Setting up Firebase push notifications in a NativeScript Angular application is a straightforward process

Downloading a CSV file using Angular 8 and Django RestFramework

Angular Pipe displays values properly, but ngFor fails to render them

Using TypeScript to Load JSON Data from a Folder

Angular not successfully passing ID in for loop

Using Typescript in NextJS 13 application router, implement asynchronous fetching with async/await

Discovering ways to align specific attributes of objects or target specific components within arrays

What is the best way to automatically focus on my input when the page loads?

The ngModel in Angular 2 does not update when a selection is made

Context API is failing to work in components that use children when the version is v16.6.0 or higher

Creating an Angular form from scratch using HTML

Is there a way to efficiently load the json files only upon clicking the corresponding language button?

Retrieving JSON data in Angular 2

Strange problem encountered when transferring data to and from API using Typescript and Prisma

Why does TypeScript struggle to accurately deduce the return type when provided with certain parameter values?

Unable to display custom component on app.component.html

Struggling to accurately convert the string into a date object