如何基于 JSON formio.js 创建自定义组件？

Question

我想创建 formio.js 组件。首先在表单生成器中，我创建了容器，并在其中放入了 2 个输入。 JSON 结果如下。

{"components":[{"type":"button","label":"Submit","key":"submit","size":"md","block":false,"action":"submit","disableOnInvalid":true,"theme":"primary","input":true,"multiple":false,"protected":false,"unique":false,"persistent":false,"hidden":false,"clearOnHide":true,"tableView":false,"modalEdit":false,"labelPosition":"top","hideLabel":false,"disabled":false,"autofocus":false,"dbIndex":false,"calculateServer":false,"widget":{"type":"input"},"validateOn":"change","validate":{"required":false,"customPrivate":false,"strictDateValidation":false,"multiple":false,"unique":false,"custom":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"allowMultipleMasks":false,"dataGridLabel":true,"id":"e9hh92o","placeholder":"","prefix":"","customClass":"","suffix":"","defaultValue":null,"refreshOn":"","redrawOn":"","description":"","errorLabel":"","tooltip":"","tabindex":"","customDefaultValue":"","calculateValue":"","attributes":{},"conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"properties":{},"leftIcon":"","rightIcon":""},{"label":"Container","labelPosition":"top","tooltip":"","customClass":"","hidden":false,"hideLabel":true,"disabled":false,"tableView":false,"modalEdit":false,"persistent":true,"protected":false,"dbIndex":false,"encrypted":false,"redrawOn":"","clearOnHide":true,"customDefaultValue":"","calculateValue":"","calculateServer":false,"validate":{"required":false,"customMessage":"","custom":"","customPrivate":false,"json":"","strictDateValidation":false,"multiple":false,"unique":false},"unique":false,"validateOn":"change","errorLabel":"","key":"container","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"attributes":{},"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"type":"container","input":true,"placeholder":"","prefix":"","suffix":"","multiple":false,"defaultValue":null,"refreshOn":"","description":"","tabindex":"","autofocus":false,"widget":null,"allowCalculateOverride":false,"showCharCount":false,"showWordCount":false,"allowMultipleMasks":false,"tree":true,"components":[{"label":"Text Field","labelPosition":"top","placeholder":"","description":"","tooltip":"","prefix":"","suffix":"","widget":{"type":"input"},"inputMask":"","allowMultipleMasks":false,"customClass":"","tabindex":"","autocomplete":"","hidden":false,"hideLabel":false,"showWordCount":false,"showCharCount":false,"mask":false,"autofocus":false,"spellcheck":true,"disabled":false,"tableView":true,"modalEdit":false,"multiple":false,"persistent":true,"inputFormat":"plain","protected":false,"dbIndex":false,"case":"","encrypted":false,"redrawOn":"","clearOnHide":true,"customDefaultValue":"","calculateValue":"","calculateServer":false,"allowCalculateOverride":false,"validateOn":"change","validate":{"required":false,"pattern":"","customMessage":"","custom":"","customPrivate":false,"json":"","minLength":"","maxLength":"","strictDateValidation":false,"multiple":false,"unique":false},"unique":false,"errorLabel":"","key":"textField","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"attributes":{},"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"type":"textfield","input":true,"refreshOn":"","inputType":"text","id":"eteq6no","defaultValue":null},{"label":"Text Area","labelPosition":"top","placeholder":"","description":"","tooltip":"","prefix":"","suffix":"","widget":{"type":"input"},"editor":"","autoExpand":false,"customClass":"","tabindex":"","autocomplete":"","hidden":false,"hideLabel":false,"showWordCount":false,"showCharCount":false,"autofocus":false,"spellcheck":true,"disabled":false,"tableView":true,"modalEdit":false,"multiple":false,"persistent":true,"inputFormat":"html","protected":false,"dbIndex":false,"case":"","encrypted":false,"redrawOn":"","clearOnHide":true,"customDefaultValue":"","calculateValue":"","calculateServer":false,"allowCalculateOverride":false,"validateOn":"change","validate":{"required":false,"pattern":"","customMessage":"","custom":"","customPrivate":false,"json":"","minLength":"","maxLength":"","minWords":"","maxWords":"","strictDateValidation":false,"multiple":false,"unique":false},"unique":false,"errorLabel":"","key":"textArea","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"fixedSize":true,"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"attributes":{},"type":"textarea","rows":3,"wysiwyg":false,"input":true,"refreshOn":"","allowMultipleMasks":false,"mask":false,"inputType":"text","inputMask":"","id":"ecsy8qh","defaultValue":null}],"id":"e6nzm2s"}]}

我想创建基于 JSON 的组件。新组件可以在基本或任何其他部分

Answer 1

下面的 sn-p 显示了添加到 Builder 中的一些自定义组件的配置。

      let customPreDefinedFeild = {
                title: 'Pre-Defined Fields',
                weight: 10,
                components: {
                    firstName: {
                        title: 'First Name',
                        key: 'firstName',
                        icon: 'terminal',
                        schema: {
                            label: 'First Name',
                            type: 'textfield',
                            key: 'firstName',
                            input: true
                        }
                    },
                    lastName: {
                        title: 'Last Name',
                        key: 'lastName',
                        icon: 'terminal',
                        schema: {
                          label: 'Last Name',
                          type: 'textfield',
                          key: 'lastName',
                          input: true
                        }
                    },
                    email: {
                        title: 'Email',
                        key: 'email',
                        icon: 'at',
                        schema: {
                            label: 'Email',
                            type: 'email',
                            key: 'email',
                            input: true
                        }
                    },
                    phoneNumber: {
                        title: 'Mobile Phone',
                        key: 'mobilePhone',
                        icon: 'phone-square',
                        schema: {
                            label: 'Mobile Phone',
                            type: 'phoneNumber',
                            key: 'mobilePhone',
                            input: true
                        }
                    }
                }
            }

    Formio.builder(document.getElementById('builder'), {}, {
        builder: {
            custom: customPreDefinedFeild
        }
    });