optimajet / formengine

Drag & Drop Form Builder Library for React.
https://formengine.io
32 stars 6 forks source link

Possible to write the value to other form control by action? #30

Closed andy840119 closed 2 months ago

andy840119 commented 2 months ago

image image I want update the input value to first name and last name field if first name and last name changed.

https://formengine.io/documentation/actions I'v read the doucment but it doesn't mention about how to get/set the value to the field. And it's a hard to check the object form console log. I got nothing so i come here to ask 😢

Any helps?

optimajet commented 2 months ago

@andy840119 Take a look at this form:

{
  "version": "1",
  "actions": {
    "action1": {
      "body": "  e.data.textArea = e.args[0]",
      "params": {}
    }
  },
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "RsContainer 1",
        "type": "RsContainer",
        "props": {},
        "children": [
          {
            "key": "firstName",
            "type": "RsInput",
            "props": {
              "label": {
                "value": "First name"
              }
            },
            "events": {
              "onChange": [
                {
                  "name": "action1",
                  "type": "code"
                }
              ]
            }
          },
          {
            "key": "lastName",
            "type": "RsInput",
            "props": {
              "label": {
                "value": "Last name"
              }
            }
          }
        ],
        "css": {
          "any": {
            "object": {
              "flexDirection": "row"
            }
          }
        }
      },
      {
        "key": "RsInput 1",
        "type": "RsInput",
        "props": {
          "label": {
            "value": "first_name_and_last_name"
          },
          "value": {
            "computeType": "function",
            "fnSource": "  return `${form.data.firstName ?? ''} ${form.data.lastName ?? ''}`.trim()"
          }
        }
      },
      {
        "key": "textArea",
        "type": "RsTextArea",
        "props": {}
      }
    ]
  },
  "localization": {},
  "languages": [
    {
      "code": "en",
      "dialect": "US",
      "name": "English",
      "description": "American English",
      "bidi": "ltr"
    }
  ],
  "defaultLanguage": "en-US"
}

You can use computed properties (https://formengine.io/documentation/computed-properties) to set the value. Or you can manipulate form data to set a value to another form component (e.data.textArea = e.args[0]).