Formio - 从条件元素选项卡获取表单 JSON 属性

Question

我需要根据选择的内容显示Formio表单的某些页面。这是表单 JSON 的一部分：

{
  "components": [
    {
      "title": "Inici",
      "collapsible": false,
      "key": "panel1",
      "type": "panel",
      "label": "Panel",
      "input": false,
      "tableView": false,
      "components": [
        {
          "label": "HTML",
          "attrs": [
            {
              "attr": "",
              "value": ""
            }
          ],
          "content": "<h3>Fitxa 43</h3>",
          "refreshOnChange": false,
          "key": "html2",
          "type": "htmlelement",
          "input": false,
          "tableView": false
        },
        {
          "label": "HTML",
          "attrs": [
            {
              "attr": "",
              "value": ""
            }
          ],
          "content": "<h3>Identificació de l'ens local</h3>",
          "refreshOnChange": false,
          "key": "html6",
          "type": "htmlelement",
          "input": false,
          "tableView": false
        },
        {
          "label": "Columns",
          "columns": [
            {
              "components": [
                {
                  "label": "Nom",
                  "widget": "html5",
                  "customClass": "iconInputSelectFormio",
                  "disabled": true,
                  "tableView": true,
                  "dataSrc": "json",
                  "data": {
                    "json": [
                      {
                        "id": 1,
                        "codi": "1",
                        "nom": "Amposta",
                        "comarca": {
                          "id": 22,
                          "codi": "8102280001",
                          "nom": "Javi",
                          "codi2": "22"
                        }
                      },
                      {
                        "id": 2,
                        "codi": "2",
                        "nom": "Badalona",
                        "comarca": {
                          "id": 13,
                          "codi": "8101360009",
                          "nom": "Paquito",
                          "codi2": "13"
                        }
                      }
                    ]
                  },
                  "valueProperty": "nom",
                  "template": "<span>{{ item.nom }}</span>",
                  "key": "DG_NOM_ENS",
                  "type": "select",
                  "input": true
                }
              ],
              "width": 6,
              "offset": 0,
              "push": 0,
              "pull": 0,
              "size": "md",
              "currentWidth": 6
            }
          ]
        }
      ]
    }
  ]
}

这是数据源原始 JSON：

[
  {
    "id": 1,
    "codi": "1",
    "nom": "Amposta",
    "comarca": {
      "id": 22,
      "codi": "8102280001",
      "nom": "Javi",
      "codi2": "22"
    }
  },
  {
    "id": 2,
    "codi": "2",
    "nom": "Badalona",
    "comarca": {
      "id": 13,
      "codi": "8101360009",
      "nom": "Paquito",
      "codi2": "13"
     }
    }
  }
]

在我的例子中，我需要在代码与 JSON 属性的数量匹配的情况下进行评估

"comarca":{"codi":"XXXXXXX", ...}

如果是真的显示页面，如果不是真的不显示它。

我遇到的问题是，我无法从要显示或不显示的元素的条件选项卡中使用自定义查询访问 JSON。 我尝试使用

form

变量，我认为我正在访问整个 JSON 并从那里嵌套，直到我到达 ...comarca.codi 就像在普通 JS 中完成的那样。

var codiAbss = "XXXXXXX";

var codiNom = form.components.components.columns.component.data.json.comarca.codi;

if(codiAbss === codiNom) {
  show = true;
} else {
  show = false;
}

也许有一种更简单的方法，通过调用 select 元素的键并从那里访问它的属性。尽管如此，我也尝试了其他方法，但我没有找到解决方案。

Answer 1

要从Formio 中的条件元素选项卡访问JSON 属性，您可以使用数据对象访问选择元素的值，然后使用JSON.parse() 将JSON 字符串解析为对象。获得对象后，您可以访问 comarca 对象及其 codi 属性，以将其与 codiAbss 变量进行比较。

var codiAbss = "XXXXXXX";

// Get the value of the select element
var selectValue = data[component.key];

// Parse the JSON string into an object
var selectObject = JSON.parse(selectValue);

// Access the comarca object and its codi property
var codiNom = selectObject.comarca.codi;

// Compare the values and set the show variable accordingly
if (codiAbss === codiNom) {
  show = true;
} else {
  show = false;
}

您可以将 component.key 替换为您选择的元素的键。此代码应添加到要根据选择值显示或隐藏的元素的“自定义默认值”或“自定义可见性”属性。