FormIO - Dynamic labels for Text Field based on the input data of another text field

Question

In my form, I have 2 text fields, Based on the user input from the input field 1, the label of the 2nd field should change. Input 1 label: Name Input 2 label: User, Please enter your age

Now when the user enters the name as John, Label 2 should be changed from 'User, Please enter your age' to 'John, 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}}, Please enter your age",
      "redrawOn": "name",
      "key": "age",
      "type": "textfield",
      "input": true,
      "tableView": true
    }
  ],
  "input": false,
  "tableView": false
}

`

If I set label to " {{row.name}}, Please enter your age", Initially when the form load there will not be any data in the name field, so the 2nd label is " , Please enter your age".

Is it possible to have "user", i.e "User, Please enter your age" until the name value is entered?

Answer 1

Here is the workaround I followed

1. In the second field label, change the {{row.name}} to dummy variable {{data.name1}}
2. Change the second field redraw on based on the first field
3. Add the logic in the calculated values section when data.name is empty, set data.name1 value to "User", otherwise assign the data.name to data.name1 here is the snippet

if (data.name === "") {
  data.name1="User";
}else{
  data.name1=data.name;
}