How to count Item Total and Total Price Angular Reactive Form Array

Question

I want to calculate Item Total Price and Total Price . How can I get the ItemTotal and SubTotal. Medicine store invoice system. Here I added Medicine to lines but how can I calculate Total Price All of my Items.

medicinepurchase.component.ts

export class MedicinePurchaseComponent implements OnInit {
  trial: any;
  medicinePurchase: IMedicinePurchase;
  medicineID = new FormControl();
  brandName = new FormControl();
  genericName = new FormControl();
  quantity = new FormControl();
  price = new FormControl();
  totalPrice: number;
  filteredMedicine: Observable<IMedicine[]>;
  filteredMedicineByID: Observable<IMedicine[]>;
  filteredMedicineByGname: Observable<IMedicine[]>;
  medicine: IMedicine[] = [
  ];

  medicines: IMedicine[];
  filteredOptions: Observable<any[]>;
  medicinePurchaseForm: FormGroup;


  constructor(private medicineService: MedicineService, private fb: FormBuilder) {
    this.filteredMedicine = this.brandName.valueChanges
    .pipe(
      startWith(''),
      map(state => state ? this._filtermedicine(state) : this.medicine.slice())
    );
    this.filteredMedicineByGname = this.genericName.valueChanges
    .pipe(
      startWith(''),
      map(state => state ? this._filtermedicineByGName(state) : this.medicine.slice())
    );
    this.filteredMedicineByID = this.medicineID.valueChanges
    .pipe(
      startWith(''),
      map(state => state ? this._filtermedicineid(state) : this.medicine.slice())
    );
  }
  ngOnInit(): void {
    this.getAllMedicine();
    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;
  }
  selectMedicine(value: IMedicine) {
    this.medicineID.setValue(value.id);
    this.genericName.setValue(value.genericName);
    this.brandName.setValue(value.brandName);
    this.price.setValue(value.unitPrice);
  }
  addMedicinetoLine(){
    this.medicineArray.push(this.getLineFormGroup());
  }

  getLineFormGroup(){
    const lineItem = this.fb.group({
          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(),
    });
    return lineItem;
  }

  onSubmit(){
    console.log(this.medicinePurchaseForm.value);
  }
  getAllMedicine(){
    this.medicineService.getAllMedicine().subscribe(value => {
      this.medicine = value;
    });
  }
  private _filtermedicine(value: string): IMedicine[] {
    const filterValue = value.toLowerCase();

    return this.medicine.filter(state => state.brandName.toLowerCase().includes(filterValue));
  }
  private _filtermedicineByGName(value: string): IMedicine[] {
    const filterValue = value.toLowerCase();

    return this.medicine.filter(state => state.genericName.toLowerCase().includes(filterValue));
  }
  private _filtermedicineid(value: number): IMedicine[] {
    const result = this.medicine.filter(x => x.id === value);
    return result;
  }
}

medicinepuechase.component.html

<form>
  <mat-form-field class="form-id" appearance="fill">
    <mat-label>ID</mat-label>
    <input type="number" matInput
                        readonly
                        aria-label="ID"
                        [matAutocomplete]="autoID"
                        [formControl]="medicineID">
    <mat-autocomplete #autoID="matAutocomplete">
        <mat-option *ngFor="let medicine of filteredMedicineByID | async"  (click)="selectMedicine(medicine)">
          <span>{{medicine.id}}</span> |
          <span>{{medicine.brandName}}</span> |
          <small>{{medicine.genericName}}</small>
        </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <mat-form-field class="form-brand-name" appearance="fill">
      <mat-label>Brand Name</mat-label>
      <input type="text" matInput
                          aria-label="BrandName"
                          [matAutocomplete]="autobrandName"
                          [formControl]="brandName">
      <mat-autocomplete #autobrandName="matAutocomplete">
        <mat-option *ngFor="let medicine of filteredMedicine | async"  (click)="selectMedicine(medicine)">
          <span>{{medicine.id}}</span> |
          <span>{{medicine.brandName}}</span> |
          <small>{{medicine.genericName}}</small>
        </mat-option>
      </mat-autocomplete>
  </mat-form-field>

  <mat-form-field class="form-generic-name" appearance="fill">
    <mat-label>Generic Name</mat-label>
    <input type="text" matInput
                        aria-label="GenericName"
                        [matAutocomplete]="autoGenericName"
                        [formControl]="genericName">
    <mat-autocomplete #autoGenericName="matAutocomplete">
        <mat-option *ngFor="let medicine of filteredMedicineByGname | async"  (click)="selectMedicine(medicine)">
          <span>{{medicine.id}}</span> |
          <span>{{medicine.brandName}}</span> |
          <small>{{medicine.genericName}}</small>
        </mat-option>
      </mat-autocomplete>
  </mat-form-field>

  <mat-form-field class="form-quantity" appearance="fill">
    <mat-label>Quantity</mat-label>
    <input type="number" matInput [formControl]="quantity">
  </mat-form-field>

  <button mat-button (click)="addMedicinetoLine()">ADD</button>
</form>
<hr>
<form [formGroup]="medicinePurchaseForm" (ngSubmit)="onSubmit()" novalidate *ngIf="medicinePurchaseForm">
    <div formArrayName="purchaseMedicineList">

        <table>
          <tr>
            <th>Medicine ID</th>
            <th>Medicine Name</th>
            <th>Quantity</th>
          </tr>
          <tr *ngFor="let medicine of medicinePurchaseForm.controls['purchaseMedicineList'].controls; index as t" [formGroupName]="t">

              <td><input type="text" formControlName="medicineId" placeholder="ID" /></td>
              <td><input type="text" formControlName="medicineName" placeholder="Name" /></td>
              <td><input type="text" placeholder="quantity" formControlName="quantity" ></td>
              <td><input type="text" placeholder="Item Total" formControlName="itemTotal" ></td>
              <td>Price: {{medicinePurchaseForm.controls['purchaseMedicineList'].controls[t].controls.quantity.value * medicinePurchaseForm.controls['purchaseMedicineList'].controls[t].controls.unitPrice.value}}</td>
          </tr>
        </table>

        <!-- Calculate Total Price shows Here -->
    </div>
    <button type="submit">Submit</button>
</form>

I want to calculate Item Total Price and Total Price . How can I get the ItemTotal and SubTotal. Medicine store invoice system. Here I added Medicine to lines but how can I calculate Total Price All of my Items.

Answer 1

You can just iterate over controls of FormArray and calculate total price.

public getTotalPrice(): number {
  let totalPrice: number
  for (let control of medicineArray.controls) {
     totalPrice = totalPrice + itemTotal;
  }
  return totalPrice;
}

You can also check this blog