FormIO中基于另一文本框输入动态修改文本框标签的实现问题

可以实现，只需要修改第二个文本框的label模板，通过逻辑判断处理name字段为空的情况即可。

原配置中，row.name初始为空，所以标签会显示 , Please enter your age。我们可以用FormIO支持的模板语法，当row.name为空时显示User，有内容时显示输入的名称：

修改第二个文本框的label属性为：

{{ row.name || 'User' }}, Please enter your age

完整的配置代码如下：

{
  "title": "Page 1",
  "label": "Page 1",
  "type": "panel",
  "key": "page1",
  "components": [
    {
      "label": "Name",
      "key": "name",
      "type": "textfield",
      "input": true,
      "tableView": true
    },
    {
      "label": "{{ row.name || 'User' }}, Please enter your age",
      "redrawOn": "name",
      "key": "age",
      "type": "textfield",
      "input": true,
      "tableView": true
    }
  ],
  "input": false,
  "tableView": false
}

原理说明 #

• row.name || 'User'是JavaScript逻辑或运算符的应用：当row.name为空（或未定义）时，会返回'User'；当用户在Name框输入内容后，row.name有值，就会返回输入的名称。
• 已配置的redrawOn": "name"会监听name字段的变化，每次输入内容时自动重新渲染第二个文本框的标签，实现动态更新效果。

内容的提问来源于stack exchange，提问作者Mounika Murugeshan