json - 如何基于 JSON formio.js 创建自定义组件?
问题描述
我想创建 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"}]}
解决方案
以下片段显示了添加到 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
}
});
推荐阅读
- jquery - 删除记录时刷新页面
- c# - 解析 RDF - dotnetrdf c#
- java - 无法使用 Java maven 4,0 进行 selenium 测试的 Opera 浏览器
- sql - 将数据工厂中的纪元时间转换为日期时间
- java - 无法删除特定的变音符号
- laravel - 尝试使用油门时,Laravel 作业在 Redis 上失败
- r - 如何从数据框中检索特定行并将检索到的值分配给 Rshiny 中的输入控件
- javascript - jQuery - $(this) 不接受元素
- android - 片段中的 Sharedpreference Edittext
- angular - 在角度 6 中禁用 mat-stepper 上先前完成的步骤