如何将字符串形式的任何公式转换为真正的公式并使用 Angular6 实现动态创建的形式？

Question

我有一个HomeComponent，其中我有一个JSON，我将它传递给另一个名为CalculatorComponent 的组件，其中动态表单基于JSON 生成。基本上动态计算器是从我传递给CalculatorComponent 的json 生成的。所以我在同一个JSON 中也有一个字符串形式的公式，它是对象中键的值。 但我被困在如何将字符串形式的公式转换为形式以获得动态生成计算器的结果字段中的结果。

在我的CalculatorComponent 中，我正在生成动态计算器表单并动态绑定输入字段变量，并在表单提交时获取表单字段值。但我在我的 json 中也有一个字符串形式的公式，并且想在我的表单字段上实现该公式以在 Result 输入字段中获得结果。

我在'home.component.ts'中有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"
 }

我的calculator.component.html中有这个代码

  <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" 
     (change)="updateResult()"   
   [(ngModel)]="formInputsVar[inputRow.variable]" [ngModelOptions]=" 
  {standalone: true}" aria-describedby="emailHelp" placeholder=" 
  {{inputRow.placeholder}}">
  </div>
   <button type="submit" class="btn btn-primary" 
   (click)="onSubmit()">Submit</button>
  </form>
  </div>
 </div>

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

    }

这是Stackblitz上的完整工作代码

我想在我的表单字段上转换我的JSON 中的公式，以便我可以在我的Result 字段中实时获得结果，就像 Angular 2 方式绑定一样。这是我想要复制的参考工作example

注意 我将有不同的计算器，每个计算器的JSON 会因字段数不同和formula 而不同。每个计算器的 json 都将保存在我的数据库中，但只是为了提问，我将所有 json 放在 ts 文件中。

Answer 1

您可以尝试使用输入事件，在 dynamicFormJson 中定义函数，然后在计算器中调用它

 <input type="{{inputRow.type}}" class="form-control"  [(ngModel)]="formInputsVar[inputRow.variable]" [ngModelOptions]="{standalone: true}" aria-describedby="emailHelp" (input)="changeResult()" placeholder="{{inputRow.placeholder}}">

ts app.component:

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'}
  ],
  function:function(input) {
    input.res = input.amount * input.percent / 100;
    return input;
  }
}

ts 计算器：

changeResult() {
    this.formInputsVar = this.formJson.function(this.formInputsVar);
  }

演示：https://stackblitz.com/edit/angular-9qmx8r