How can I count Item Total and Total Price Angular Reactive Form Array

Question

I wanna count ItemTotal = quantity * UnitPrice and Total Price Of Invoice. Please suggest me to write the right Method to Count Total and Item Total.

medicinePurchaseForm: FormGroup;

ngOnInit(): void {
    this.initForm();
}

  private initForm() {
    this.medicinePurchaseForm = new FormGroup({
      prescriptionId: new FormControl(),
      subtotal: new FormControl(),
      purchaseMedicineList: new FormArray([
        
      ])
    });
  }

get medicineArray() {
    return this.medicinePurchaseForm.controls.purchaseMedicineList as FormArray;
}

addMedicinetoLine(){
    const purchasemedicine = new FormGroup({
          medicineId: new FormControl(this.medicineID.value, Validators.required),
          medicineName: new FormControl(this.brandName.value, Validators.required),
          unitPrice: new FormControl(this.price.value),
          quantity: new FormControl(this.quantity.value, Validators.required),
          itemTotal: new FormControl(),
    });
    this.medicineArray.push(purchasemedicine);
  }

meDom · Accepted Answer · 2021-09-10 18:00:20Z

1

Try this, it should calc-live in your form...

HTML:

<mat-form-field appearance="fill">
    <mat-label>Quantity</mat-label>
    <input formControlName="quantity" (input)="calculateTotal()" matInput />
</mat-form-field>

<mat-form-field appearance="fill">
    <mat-label>Unit Price</mat-label>
    <input formControlName="unitPrice" (input)="calculateTotal()" matInput />
</mat-form-field>

<mat-form-field appearance="fill">
    <mat-label>Total</mat-label>
    <input formControlName="itemTotal" matInput />
</mat-form-field>

calculateTotal(): void {
    if(this.medicinePurchaseForm.get('unitPrice').value === null && this.medicinePurchaseForm.get('quantity').value === null) {
        this.medicinePurchaseForm.patchValue({
            itemTotal: 0.00
        });
    } else if (this.medicinePurchaseForm.get('unitPrice').value === null) {
        this.medicinePurchaseForm.patchValue({
            itemTotal: 0.00
        });
    } else if (this.medicinePurchaseForm.get('quantity').value === null) {
        this.medicinePurchaseForm.patchValue({
            itemTotal: 0.00
        });
    } else {
        this.medicinePurchaseForm.patchValue({
            itemTotal: +(this.medicinePurchaseForm.get('unitPrice').value) * +(this.medicinePurchaseForm.get('quantity').value)
        });
    }
}

Regards

edited Sep 10, 2021 at 18:00

answered Sep 10, 2021 at 14:47

meDom

3051 gold badge3 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MD SHAFFAT Over a year ago

Than you so much for answered but this is not working properly for form array.

meDom Over a year ago

I corrected "this.formGroup" to your name "this.medicinePurchaseForm". Feel free to ask with more details

MD SHAFFAT Over a year ago

this function works fine . But when I add Multiple formGroup to the purchaseMedicineList array . How can I get the Total Price ?

MD SHAFFAT Over a year ago

github.com/Mdshaffat/AngularProject/tree/main/src/app/cliant/…

MD SHAFFAT Over a year ago

Here is my code : github.com/Mdshaffat/AngularProject/tree/main/src/app/cliant/…

Collectives™ on Stack Overflow

How can I count Item Total and Total Price Angular Reactive Form Array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related