Как я могу связать результат динамической формулы в поле ввода результата на основе динамического калькулятора с использованием Angular6?

У меня есть ситуация, когда мне нужно создать динамический калькулятор с динамическими полями. Например, если мне нужно сгенерировать «Калькулятор процентов», чтобы поля калькулятора были специфичными, и если мне нужно создать калькулятор «Сложных процентов», чтобы поля ввода калькуляторов определенно отличались. Оба калькулятора также будут иметь разные формулы. Так что мне удалось создать динамические калькуляторы.

у меня 2 компонента. Один HomeComponent, а другой CalculatorComponent. Я звоню CalculatorComponent в HomeComponent. Я прохожу JSON от home.component.ts вот так

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'}
  ]
}

Вот мой calculator.component.ts код, в котором я создаю динамические переменные для каждого поля ввода и привязываю эти динамические переменные к динамически создаваемым полям ввода.

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.info(this.formInputsVar);
 }

} 

Благодаря этому подходу мне удалось создать динамический калькулятор и сгенерировать динамические переменные, а затем назначить поля ввода и получить значения из этого события щелчка onSubmit. Вот мой полный рабочий код на StackBlitz

Теперь я ищу, как я могу реализовать формулу таким образом, чтобы когда пользователь вводил значения в поля ввода, а затем он вычислял результат и отображал его в поле ввода результата в режиме реального времени, как двухсторонняя привязка Angular. Я добавлю формулу в объект json массива inputs, но я застрял на том факте, как я могу динамически реализовать формулу в полях ввода, потому что каждый калькулятор будет иметь разные JSON и разные формулы.

Вот справочный веб-сайт

Если у меня есть формула в том же json калькулятора, как это

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"
}

Итак, как я могу реализовать эту формулу на моем динамически созданном калькуляторе.

Примечание JSON калькулятора будет отличаться для каждого калькулятора, и формула также будет отличаться для каждого калькулятора.

Вы можете увидеть на справочном веб-сайте функциональность калькулятора. хочу точно такой же. Вы также можете проверить другие калькуляторы. Я использую Ангуляр6