Count total amount of all angular reactive inputs on change

Question

I have reactive form, with multiple number only inputs. I use function to modify every input value on change:

initsForm() {
  this.form = this.fb.group({
                coffee: ['0', [
                 Validators.min(0)
                ]],
                tea: ['0', [
                 Validators.min(0)
               ]]
              })

  this.countAmount();
}



countAmount() {
      this.form.valueChanges.subscribe(val => {
          Object.keys(this.form.controls).forEach(key => {
          console.log((this.form.get(key).value * 1.75))
        })
      })
    }

This console log modified value of every input after change, but i need console log total amount of all inputs. How can i do that?

Answer 1

I should use reduce method:

  countAmount() {
    this.form.valueChanges.subscribe(val => {
      let res = [];

      Object.keys(this.form.controls).forEach(key => {
        res.push(this.form.get(key).value * this.counters[key])
      });

      res = res.reduce((prev, next) => prev + next);

      this.totalAmount += Number(res);
    })
  }