Is there a way to automatically populate the result input field with the dynamic calculation results from a dynamic calculator in Angular6?

Question

Is there a way to automatically populate the result input field with the dynamic calculation results from a dynamic calculator in Angular6?

My current challenge involves creating dynamic calculators with customizable fields. For example, I can generate a "Percentage Calculator" with specific input fields or a "Compound Interest" Calculator with different input requirements and formulas. Successfully, I have managed to develop these dynamic calculators.

In my setup, there are 2 key components - the HomeComponent and the CalculatorComponent. The CalculatorComponent is called within the HomeComponent, passing JSON data from home.component.ts like this:

this.dynamicFormJson = {
  heading : 'Percentage Calculator',
  totalFields : 3,
  inputs : [
    {label : 'Percent', placeholder : 'Enter Percentage Here', type : 'number', variable : 'percent'},
    {label : 'Amount', placeholder : 'Enter Amount Here', type : 'number', variable : 'amount'},
    {label : 'Result', placeholder : '', type : 'number', variable : 'res'}
  ]
}

The code in my calculator.component.ts file involves dynamic creation of variables for each input field, which are then bound to the dynamically created input fields.

import { Component, OnInit , Input} from '@angular/core';

@Component({
 selector: 'app-calculator',
 templateUrl: './calculator.component.html',
 styleUrls: ['./calculator.component.css']
 })
export class CalculatorComponent implements OnInit {

 @Input() formJson : any;
 formInputsVar = {};
 constructor() { }

 ngOnInit() {
 this.formJson.inputs.map((item : any)=>{
  if (!this.formInputsVar[item.variable]) {
    this.formInputsVar[item.variable] = '';
  }
 })
}
 onSubmit(){
  console.log(this.formInputsVar);
 }

}

This approach allows me to create dynamic calculators, generate variables for input fields, and capture values upon submission through the onSubmit event. You can view the complete working code on StackBlitz.

I am now exploring how to implement formulas that automatically calculate results in real time as users input values. Each calculator will have its own JSON data and formula specifications, making it challenging to implement dynamic formulas for various calculators.

If the formula is included in the JSON object of the calculator, such as:

this.dynamicFormJson = {
  heading : 'Percentage Calculator',
  totalFields : 3,
  inputs : [
    {label : 'Percent', placeholder : 'Enter Percentage Here', type : 'number', variable : 'percent'},
    {label : 'Amount', placeholder : 'Enter Amount Here', type : 'number', variable : 'amount'},
    {label : 'Result', placeholder : '', type : 'number', variable : 'res'}
  ],
formula : "percent * amount / 100"
}

I need guidance on implementing these formulas dynamically in my generated calculators.

Please Note: Every calculator will have unique JSON structure and formula requirements.

You can observe a similar calculator functionality on a reference website.

I aim to replicate the same interactive calculator experience. Feel free to explore other calculators on the reference site. I am employing Angular6 for this project.

javascript json angular typescript angular6

Answer 1

Answer №1

Great question! To achieve the desired outcome on your stackblitz, simply make these two modifications:

Here are some key points to consider:

The calculator can accommodate any number of fields.
I assume that the operator is set to multiplication. To use a different operator, adjust it within the loop in the function updateResult. For complete flexibility, you could also allow users to input the operator.
The final item in your dynamicFormJson serves as the location for storing the calculated result. This explains why we loop from 0 to this.formJson.inputs.length-1.

Added an updateResult() function in calculator.component.ts. Here's the full code snippet:

import { Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {

  @Input() formJson : any;
  formInputsVar = {};
  constructor() { }

  ngOnInit() {
    this.formJson.inputs.map((item : any)=>{
      if (!this.formInputsVar[item.variable]) {
        this.formInputsVar[item.variable] = '';
      }
    })
  }

  updateResult(){
    var tempMultiplicationValue =1;
    for(var i=0; i<this.formJson.inputs.length-1; i++){
      tempMultiplicationValue = tempMultiplicationValue * this.formInputsVar[this.formJson.inputs[i].variable];
    }
    this.formInputsVar['res'] = tempMultiplicationValue;
  }


  onSubmit(){
    console.log(this.formInputsVar);
  }

}

Added (change)="updateResult()" in calculator.component.html. Here's the updated HTML code:

<div class="row">
  <div class="col-md-6">
    <form style="margin:100px 0 0 100px;background-color: lightgrey; padding: 20px;">
      <h2>{{formJson.heading}}</h2>
      <div class="form-group" *ngFor="let inputRow of formJson.inputs">
        <label for="exampleInputEmail1">{{inputRow.label}}</label>
        <input type="{{inputRow.type}}" class="form-control"  [(ngModel)]="formInputsVar[inputRow.variable]" [ngModelOptions]="{standalone: true}" (change)="updateResult()" aria-describedby="emailHelp" placeholder="{{inputRow.placeholder}}">
      </div>
      <button type="submit" class="btn btn-primary" (click)="onSubmit()">Submit</button>
    </form>
  </div>
</div>

Answer 2

Great question! To achieve the desired outcome on your stackblitz, simply make these two modifications:

Here are some key points to consider:

The calculator can accommodate any number of fields.
I assume that the operator is set to multiplication. To use a different operator, adjust it within the loop in the function updateResult. For complete flexibility, you could also allow users to input the operator.
The final item in your dynamicFormJson serves as the location for storing the calculated result. This explains why we loop from 0 to this.formJson.inputs.length-1.

Added an updateResult() function in calculator.component.ts. Here's the full code snippet:

import { Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {

  @Input() formJson : any;
  formInputsVar = {};
  constructor() { }

  ngOnInit() {
    this.formJson.inputs.map((item : any)=>{
      if (!this.formInputsVar[item.variable]) {
        this.formInputsVar[item.variable] = '';
      }
    })
  }

  updateResult(){
    var tempMultiplicationValue =1;
    for(var i=0; i<this.formJson.inputs.length-1; i++){
      tempMultiplicationValue = tempMultiplicationValue * this.formInputsVar[this.formJson.inputs[i].variable];
    }
    this.formInputsVar['res'] = tempMultiplicationValue;
  }


  onSubmit(){
    console.log(this.formInputsVar);
  }

}

Added (change)="updateResult()" in calculator.component.html. Here's the updated HTML code:

<div class="row">
  <div class="col-md-6">
    <form style="margin:100px 0 0 100px;background-color: lightgrey; padding: 20px;">
      <h2>{{formJson.heading}}</h2>
      <div class="form-group" *ngFor="let inputRow of formJson.inputs">
        <label for="exampleInputEmail1">{{inputRow.label}}</label>
        <input type="{{inputRow.type}}" class="form-control"  [(ngModel)]="formInputsVar[inputRow.variable]" [ngModelOptions]="{standalone: true}" (change)="updateResult()" aria-describedby="emailHelp" placeholder="{{inputRow.placeholder}}">
      </div>
      <button type="submit" class="btn btn-primary" (click)="onSubmit()">Submit</button>
    </form>
  </div>
</div>

Is there a way to automatically populate the result input field with the dynamic calculation results from a dynamic calculator in Angular6?

Answer №1

Similar questions

When utilizing React router v5, the exact property in a route may not function as expected if there is a

Sending data with POST or PUT requests in HttpClient is a

Internal server error frequently occurs when there is an issue with Ajax requests in a Laravel application

I'm trying to figure out how to redirect only the empty path using the new router in Angular 2. Can anyone

Parse through a JSON input and generate a hierarchical treeview structure using the specified keys, while also considering any child keys present

I am interested in implementing a logout feature using a button in PHP

Material-UI React Native components: Injecting Styles without Props

The mat select option does not have the correct width for the mat

Incapable of modifying the text within a div container

Tips for minimizing the padding/space between dynamically generated div elements using html and css

What is the reason for function components running in multiples of 2 when the state changes?

Searching for a solution to eradicate and " from a JSON value in Apache Nifi?

The application of Angular's extension may experience functionality issues due to a failed ngcc operation

What is the best method to completely uninstall Apollo-Angular along with all of its dependencies?

What could be causing this JavaScript to output undefined?

The JavaScript code is attempting to execute a PHP script, however, I am struggling to parse the JSON data returned for use in the

Incorporating unique symbols into a RegExp object during its creation using a variable

Determine the full location information with the help of Google Maps SDK without the need

Removing error messages upon form reset initiated by an API request

Identifying a failed Ajax Request in JavaScript