适用场景
form，快捷实现表单数据的提交与展示场景。
使用说明
区域 | 说明 | 示意图 |
内容区 |
比如，表单中放入了两个文本输入组件，他们的「form data key」分别配置为 textInput1，和textInput2，输入的值分别为 "a" 和 "b"， 则表单的值为： { "textInput1":"a", "textInput2":"b" } 同一个表单下有多个相同的「form data key」，则均不会生效
| 内容区示意图： 250px|700px|reset  |
交互区 |
比如，文本输入组件的「form data key」配置为"first_name"，表单的data信息中会包含"first_name"，并且其值为该文本输入组件的值，可以通过{{ form.data.first_name }}消费该组件的值
| 250px|700px|reset  |
外观区 |
| 250px|700px|reset  |
配置方式
快速搭建
截图 | 说明 |
250px|700px|reset | Step1: 拖入一个表单组件，点击 表单生成器 |
250px|700px|reset | Step2：选择对象，并勾选字段，选择字段对应的输入组件，以及组件是否必填 |
250px|700px|reset | Step3：点击 生成表单，一键完成表单配置
|
0 到 1 搭建
截图 | 说明 |
250px|700px|reset | Step1: 拖入一个表单组件，拖入组件至表单的内容区 |
250px|700px|reset | Step2：定义输入组件「form data key」
比如，文本输入组件的「form data key」配置为"first_name"，表单的 data 信息中会包含"first_name”，并且其值为该文本输入组件的值，可以通过{ { form.data.first_name } }消费该组件的值。
组件的 name 属性会修改为 id 表单的数据是由其内容区输入组件的「form data key」和 value 组成
|
250px|700px|reset | Step3：定义表单提交事件
|
属性API
属性 | 类型 | 默认值 | 描述 |
submitting | boolean | false | 是否正在提交中 |
invalidFields | array | [] | 校验不通过的输入组件列表 |
invaild | boolean | false | 校验是否失败 |
disabled | boolean | false | 是否禁用 |
readOnly | boolean | false | 是否只读 |
loading | boolean | false | 是否显示加载中 |
showHeader | boolean | true | 是否显示标题区 |
showBody | boolean | true | 是否显示内容区 |
showFooter | boolean | true | 是否显示底部区 |
hidden | boolean | false | 是否显示 |
方法 API
方法 | 说明 |
setData(data:object) | 设置表单值 |
submit() | 提交 |
validate() | 触发校验 |
clearValidation() | 清空校验状态 |
clear() | 清空表单值 |
reset() | 重置表单为初始值 |
setDisabled(disabled: boolean) | 设置是否禁用 |
setLoading(loading:boolean) | 设置是否加载中 |
setHidden(visible:boolean) | 设置是否隐藏 |
setReadOnly(readOnly:boolean) | 设置是否只读 |
