Calculation Based on Checkbox in Reactive Forms

Question

I'm confused on how would i get the checkbox value so i get the "amount" and the "total" values. The computation is pretty simple. The checkbox value is 1.20 or 20%. The amount is (quantity * price) / checkbox value, if the checkbox value have a check on it. And the total value is only (quantity * price). Here's the link to my codes.

UPDATE!!! Now it's working but the problem is that it doesn't automatically calculates but i have to click outside the input field to update it.

COMPLETE CODE IS HERE

 onChange(isChecked, id){
    console.log(isChecked)
    let quantity = (<FormArray>this.myForm.controls['rows']).controls[id]['controls']['quantity'].value
    let price = (<FormArray>this.myForm.controls['rows']).controls[id]['controls']['price'].value
    let checkbox = (<FormArray>this.myForm.controls['rows']).controls[id]['controls']['checkbox'].value

    let x = (<FormArray>this.myForm.controls['rows']).at(id);
    if(isChecked){
      x.patchValue({
        amount: (quantity * price)/checkbox,
        total: quantity * price
    });
    }

    else {
      x.patchValue({
        amount: (quantity * price)/checkbox,
        total: (quantity * price)/checkbox,
    });
    }
  }

Answer 1

Sorry the delay. I you want to use a "auxiliar variable" "totals" you must

//declare the variable at first
totals:any[]=[] //totals will be like, e.g. [{total:0,amount:0},{total:10,amount:23}...]

//In patchValues
    this.orders.forEach(material => {
      material.materials.forEach(x => {
        rows.push(this.fb.group({
          material_id: x.id,
          material_name: x.name,
          quantity: [null, Validators.required],
          price: [null, Validators.required],
          dis_checkbox: [true],
          checkbox: [1.20]
        })) //see that total and amount is NOT in the form
        this.totals.push({amount:0,total:0});  //<--add this line
      })
    })

//And finally, we change the "setOnchange" (I commented the lines that you don't need)
setOnChange()
{
    const formarray=this.myForm.get('rows') as FormArray;
    for (let i=0;i<formarray.length;i++)
    { 
      formarray.at(i).valueChanges.subscribe(val=>{

      //"total" and "amount" are simply variables
      //we needn't look for the controls (not exist)
//      let controlTotal=(this.myForm.get('rows') as FormArray).at(i).get('total')
//      let controlAmount=(this.myForm.get('rows') as FormArray).at(i).get('amount')     

      let value=(val.quantity)*(val.price);
      this.totals[i].total=value;  //<--just update the value of the variable
//      if (controlTotal.value!=value)  
//        controlTotal.setValue(value);

      value=val.dis_checkbox?value/val.checkbox:value;
      this.totals[i].amount=value;  //<--idem
//      if (controlAmount.value!=value)  
//        controlAmount.setValue(value); 
    });
    }
  }