Angular two way binding to get total from input fields

Question

Below I have 5 input field which are rent , cam , security and support and estimated revenue , now how do we bind those input fields to get each value and show and assign the total of the 5 fields to the total rent field ?

Everytime the value changes on for example on rent , cam etc. it should update the total value on the total montly rent field

For example if rent field value is 2 , cam is 1 , security is 1 , support is 1 and estimated revenue is 1 then the value of total monthly rent is 6. And If I change any of the value it should update the total.

Anyone has an idea , would be muchly appreciated.

#ts code

class DealPLSFormFields {
  dealName:string;
  dealSummary:string;
  dealPartner:string;
  startDate: string;
  endDate: string;
  rent: number;
  cam:number;
  totalBrokerCommission: number;
  supportServicesFee: number;
  estimatedOtherRevenue;
  descriptionOfOtherRevenue: string;
  totalMonthlyRentAndFees : number;
  buildOutCostReimbursement: number;
  dealId: number;
  securityMonitoring: any;

  constructor(){
    this.dealName = null;
    this.dealSummary = null;
  }
}

dealPLSFormFields: DealPLSFormFields;
  ngOnInit(): void {   
    this.dealPLSFormFields = new DealPLSFormFields();
   
  }

#html code

<div fxLayout="row" fxLayoutAlign="space-between center" >
            <mat-form-field appearance="fill" class="w-49per">
                <mat-label>Rent (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.rent"
                  [required]="isExistingDeal">
              </mat-form-field>
              <mat-form-field appearance="fill" class="w-49per">
                <mat-label>CAM (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.cam"
                  [required]="isExistingDeal">
              </mat-form-field>
          </div>
          <div fxLayout="row" fxLayoutAlign="space-between center" >
            <mat-form-field appearance="fill" class="w-49per">
                <mat-label>Security Monitoring (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.securityMonitoring"
                  [required]="isExistingDeal">
              </mat-form-field>
              <mat-form-field appearance="fill" class="w-49per">
                <mat-label>Support Services Fee (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.supportServicesFee"
                  [required]="isExistingDeal">
              </mat-form-field>
          </div>
          <mat-form-field appearance="fill">
            <mat-label>Estimated Other Revenue (e.g, percentage rent, referral fees)</mat-label>
            <input 
              matInput
              [(ngModel)]="dealPLSFormFields.estimatedOtherRevenue"
              [required]="isExistingDeal">
          </mat-form-field>
          <mat-form-field appearance="fill">
            <mat-label>Description of Other Revenue</mat-label>
            <input 
              matInput
              [(ngModel)]="dealPLSFormFields.descriptionOfOtherRevenue"
              [required]="isExistingDeal">
          </mat-form-field>
          <mat-form-field appearance="fill">
            <mat-label>Total Monthly Rent and Fees</mat-label>
            <input 
              matInput
              [(ngModel)]="dealPLSFormFields.totalMonthlyRentAndFees"
              [required]="isExistingDeal">
          </mat-form-field>

You should use reactive form module and subscribe to the formGroup changes to do such calculation. — Ritesh Waghela
– Ritesh Waghela, Commented Sep 17, 2021 at 9:27

marc_s · Accepted Answer · 2021-09-26 09:00:14Z

As I said, best is to use the reactive forms for such use cases, but if you are not able to and want to go ahead with current implementation, do the following changes:

Add a keyup listener to all your input element that would perform the calculation:

<div fxLayout="row" fxLayoutAlign="space-between center" >
<mat-form-field appearance="fill" class="w-49per">
    <mat-label>Rent (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.rent"
      [required]="isExistingDeal">
    
  </mat-form-field>
  <mat-form-field appearance="fill" class="w-49per">
    <mat-label>CAM (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.cam"
      [required]="isExistingDeal">
  </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="space-between center" >
<mat-form-field appearance="fill" class="w-49per">
    <mat-label>Security Monitoring (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.securityMonitoring"
      [required]="isExistingDeal">
  </mat-form-field>
  <mat-form-field appearance="fill" class="w-49per">
    <mat-label>Support Services Fee (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.supportServicesFee"
      [required]="isExistingDeal">
  </mat-form-field>
</div>
<mat-form-field appearance="fill">
<mat-label>Estimated Other Revenue (e.g, percentage rent, referral fees)</mat-label>
<input 
  matInput
  (keyup) = "calc()"
  [(ngModel)]="dealPLSFormFields.estimatedOtherRevenue"
  [required]="isExistingDeal">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Description of Other Revenue</mat-label>
<input 
  matInput
  (keyup) = "calc()"
  [(ngModel)]="dealPLSFormFields.descriptionOfOtherRevenue"
  [required]="isExistingDeal">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Total Monthly Rent and Fees</mat-label>
<input 
  matInput
  [(ngModel)]="dealPLSFormFields.totalMonthlyRentAndFees"
  [required]="isExistingDeal">
</mat-form-field>

next, in your component:

 calc() {
    const rent = this.dealPLSFormFields.rent ? this.dealPLSFormFields.rent : 0;
    const cam = this.dealPLSFormFields.cam ? this.dealPLSFormFields?.cam : 0;
    this.dealPLSFormFields.totalMonthlyRentAndFees = +rent + +cam;
  }

Check this stackblitz for working example: https://stackblitz.com/edit/angular-9-material-starter-5ceexh?file=src/app/app.module.ts

marc_s · Accepted Answer · 2021-09-26 09:00:39Z

2

If you need the totalMonthlyRentAndFees field to be changed to hold the total value, to be able to send it later to the server, you can achieve that by listening to the other fields changes (using ngModelChange) and calculating the totalMonthlyRentAndFees based on them.

You can change your code to be like the following:

model = {
  x: 1,
  y: 2,
  total: 3,
};

onChange() {
  this.model.total = Number(this.model.x) + Number(this.model.y);
}

<label>X</label>
<input [(ngModel)]="model.x" (ngModelChange)="onChange()" />

<label>Y</label>
<input [(ngModel)]="model.y" (ngModelChange)="onChange()" />

<label>Total</label>
<input [ngModel]="model.total" />

Here's a working StackBlitz demo.

Note: You can bind the total input to a property getter and assign the value within it to the total property, then return it.

However, this will cause the property getter to be calculated on each Angular change detection.

edited Sep 26, 2021 at 9:00

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 17, 2021 at 9:48

Amer

6,7442 gold badges12 silver badges36 bronze badges

1 Comment

Ananya Amar Over a year ago

Hi Sir @Amer , do you have idea with this one ? stackoverflow.com/questions/69287796/… Thanks

danday74 · Accepted Answer · 2021-09-17 09:35:36Z

Looks like you are using a template driven form. To do this quite simply you can use a Typescript getter.

get mySum() {
  return this.dealPLSFormFields.rent + this.dealPLSFormFields.cam + etc
}

Now you can access the value of this calculation as follows:

ts:

console.log(this.mySum)

html:

{{ mySum }}

You could also feed it into a form field using one way binding:

[ngModel]="mySum"

and make the form field readonly

Alternatively, you could switch to a reactive form and use valueChanges to do the calculation:

this.reactiveForm.valueChanges.subscribe(x => {
  // do calculation here
})

The reactive form approach is more programmatic and less expensive since TypeScript getters are constantly being executed. However, since your calculation is quite lightweight you should be fine sticking with a template driven form.

Collectives™ on Stack Overflow

Angular two way binding to get total from input fields

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related