时间戳

首页 > 解决方案 > 动态表单的动态函数

angular - 动态表单的动态函数

问题描述

我正在从 JSON 对象模型中生成反应形式（类似于https://angular.io/guide/dynamic-form，但要复杂得多）。

简单的例子：

{

"id": "1"

"type":"input"

},

{

"id": "2"

"type":"dropDown"

}

表单的生成工作正常。现在我想实现控件之间的依赖关系。

示例 1：用户删除输入中的数据。应禁用以下所有控件 示例 2：用户在下拉列表中选择一个值。下一个下拉菜单应该使用选定的值，以该值作为参数执行休息服务并显示接收到的数据。...（我至少有 6 种不同的情况）。

问题是我在开发期间没有组件，因为表单是在运行时从 JSON 对象模型生成的。

我的基本想法是在我的 JSON 对象模型中定义一个自定义函数，该函数将在特定事件发生时执行：

{
"id": "1"
"type":"input"
"dependencies": {
  "click": "clickFunctionForComponent1(1, 2)"
   }  
},
{
"id": "2"
"type":"dropDown"
}

“某处”，否则我实现该功能

clickFunctionForComponent1(currentControl otherControl) {
  if (currentCuontrol has valid data) otherControl.data = loadDataForOtherControl(); 
}

你有什么（其他）想法我能做到这一点吗？

标签： angular

解决方案

您可以使用 eval 来调用该方法。我试过这个。

    function  clickFunctionForComponent1() {
      console.log('worked');
    }

    let data = JSON.parse(`{
      "id": "1",
      "type": "input",
      "dependencies": {
        "click": "clickFunctionForComponent1()"
      }
    }`);

console.log(eval(data.dependencies.click));

或者

你可以试试这个

export class TimerComponent implements OnInit {
  constructor() {
   }


  ngOnInit() {

    let data = JSON.parse(`{
      "id": "1",
      "type": "input",
      "dependencies": {
        "click": "clickFunctionForComponent1"
      }
    }`);
      console.log(data);
      let methodName = data.dependencies.click;
      console.log(this[methodName]());
      // console.log(eval(data.dependencies.click));
  }
clickFunctionForComponent1() {
  console.log('work');
}

}

推荐阅读