How do I calculate the Amount value for the each row, without replacing the newest amount value. (Angular)

Question

Adding the Rows. Here getting the quantity and the price value using the change event. `

 <div class="row">
              <div class="col-md-6">
                <input
                  class="form-control"
                  type="text"
                  id="newdescription"
                  [(ngModel)]="newAttribute.description"
                  name="newdescription"
                  placeholder="Description"
                />
              </div>
              <div class="col-md-6">
                <input
                  class="form-control"
                  type="text"
                  id="newstudent_quantity"
                  [(ngModel)]="newAttribute.student_quantity"
                  name="newstudent_quantity"
                   (change)="getQuantity($event)"
                  placeholder="Quantity"
                />
              </div>
              <div class="col-md-6 m-1 mt-3">
                <input
                  class="form-control"
                  type="text"
                  id="newprice"
                  [(ngModel)]="newAttribute.price"
                  name="newprice"
                   (change)="getPrice($event)"
                  placeholder="Price"
                />
              </div>
              <div class="col-md-12 d-flex justify-content-end mt-1">
                <button
                  class="btn btn-default "
                  type="button"
                  (click)="addFieldValue()"
                >
                  <i class="nav-icon fas fa-plus icon-green"></i>
                </button>
              </div>
            </div>

This is the table after adding rows

  <div class="card" style="background-color: #f3f3f3">
                <div class="card-body">
                  <h4>Payment Details</h4>
                
                  <div
                    *ngFor="let field of fieldArray; let i = index"
                    class="col-md-12"
                  >
                    <div class="row">
                      <div class="col-md-6">
                        <label for="price"> Description </label>
                        <input
                          [(ngModel)]="field.description"
                          class="form-control"
                          id="description"
                          type="text"
                          name="{{ field.description }}"
                          ngModel
                          required
                          disabled
                        />

                        <label for="price"> Student Quantity </label>
                        <input
                          [(ngModel)]="field.student_quantity"
                          class="form-control"
                          id="student_quantity"
                          type="number"
                          name="{{ field.student_quantity }}"
                          value=""
                          ngModel
                          required
                          disabled
                        />
                      </div>

                      <div class="col-md-6">
                        <label for="price"> Price </label>
                        <input
                          [(ngModel)]="field.price"
                          id="price"
                          class="form-control"
                          type="number"
                          name="{{ field.price }}"
                          ngModel
                          required
                          disabled
                        />

                        <label for="amount"> Amount </label>
                        <input
                          class="form-control"
                          type="number"
                          name=""
                          ngModel
                          value="{{ amount }}"
                          required
                          disabled
                        />
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12 mt-1 d-flex justify-content-end">
                        <button
                          class="btn btn-default align-right"
                          type="button"
                          (click)="deleteFieldValue(i)"
                        >
                          <i class="nav-icon fas fa-trash-alt icon-red"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

`

this is the .ts file code

`

  newAttribute: any = {};
  fieldArray: Array<any> = [];
  quantity: any;
  price: any;
  amount: any;

  addFieldValue() {
    this.fieldArray.push(this.newAttribute);
    this.newAttribute = {};
  }

  deleteFieldValue(index: number) {
    this.fieldArray.splice(index, 1);
  }
  
  getPrice(event: any) {
  
    this.price = event.target.value;
    console.log(this.price);
  }
  getQuantity(event: any) {
    this.quantity = event.target.value;
    this.amount = this.price  * this.quantity ;
    console.log("amount" + this.amount);
  }

` I multiplied the this.quantity with the this.price and get the amount value I want to get the amount value by calculating each row quantity value multiplied by the price(without replacing the newest amount value for every amount value in the table).

Answer 1

To get the correct amount for each row, you will need to make sure it is part of the fieldArray array. Your problem is that you only have 3 properties in your newAttribute when you push it into fieldArray. Another issue is that you then use the amount in the table which is global and shared by all of the items.

Below is a simplified example for your case.

Please try to avoid use any type since it defeat the purpose of using TypeScript. I created an Item type which has 4 properties:

• description.
• price.
• quantity.
• total.

To avoid sharing the total (amount in your case), each item must have its own total. This way, when we loop through the items, we can access its total.

example.component.ts

type Item = {
  readonly description: string;
  readonly price: number;
  readonly quantity: number;
  readonly total: number;
};

@Component({
  ...
})
export class ExampleComponent {
  
  public description = '';
  public price = 0;
  public quantity = 0;

  public items: Item[] = [];

  constructor() {}

  public addItem() {
    
    const newItem = {
      description: this.description,
      price: this.price,
      quantity: this.quantity,
      total: this.price * this.quantity
    };

    this.items.push(newItem);
  }

  ...

}

example.component.html

<div>
  <input [(ngModel)]="description" placeholder="Description">
  <input [(ngModel)]="price" placeholder="Price">
  <input [(ngModel)]="quantity" placeholder="Quantity">

  <button (click)="addItem()">Add Item</button>
</div>

<!-- Loops through all the added items and display them -->

<div *ngFor="let item of items">
  <ul>
    <li>{{item.description}}</li>
    <li>{{item.price}}</li>
    <li>{{item.quantity}}</li>
    <li>{{item.total}}</li>
  </ul>
</div>