跳到主要内容

表单容器

表单容器是最重要的组件之一，常用于业务表单、数据筛选等。它负责组织表单项的布局、收集和校验表单数据、提交数据等。

经典案例：http://work.manateeai.com/workspace.html?appId=files&groupId=628581021618245&parentId=628619016933445

功能演示​

添加表单项​

给表单容器添加表单项有两种方式：从右侧配置栏点击添加表单项、从顶部组件库选取表单控件。 如果从顶部组件库拖入非表单类组件，会弹出“组件类型不匹配”。因为表单容器虽然有像自定义容器一样的功能，但是其子组件应该是表单控件。如果需要加入自定义内容，需要通过表单里的自定义内容项来添加。 添加表单项

表单类型​

表单有普通表单和查询表单两种类型，查询表单适合用来做数据筛选。 表单类型

相比普通表单，查询表单有如下特点：

  1. 表单项水平布局，自动换行
  2. 支持展开、收起表单项

特别注意：在已经有表单项时切换表单类型，界面不会立即刷新，需要增删一下表单项或者开关一下“动态设置表单项”。后续新版本中会对这个问题进行优化。

表单项布局​

  • 类型：这一项用来控制表单项Label与控件的布局方式：水平或垂直
  • 每行列数：可以设置每行几个表单项
  • 列间距：每行多列时，列之间的距离

表单项配置​

选中每个表单项都可以对其进行配置，如标题、字段名称、后置插槽、校验规则等。

另外，不同的表单项还有一些独特的配置，比如数字输入框可以进行小数精度控制、千分位等；文本框可以限制文字长度等。

动态设置表单项​

这是对整个表单的控制，如果打开这个选项，就可以通过逻辑连线连接到表单容器，将新的表单项配置完整数据传给表单。此时表单的表单项组成完全由传入的数据决定。 动态设置表单项

控件选择​

给表单容器传入新的表单项数据时，如何为表单项选择要使用的控件呢？比如输入框、下拉框。 应该用relOriginField字段：它指向哪个字段，就用那个字段的控件 动态控件选择

比如下图中的配置, 当姓名值变化时整个表单就会变成只有一个表单项：test，该项使用了age字段的控件——数字输入框 relOriginField

自定义校验规则​

每个表单项都可以在校验规则部分选择已有的规则，也可选择自定义校验规则。自定义校验规则的执行靠「JS计算」组件来实现，无论校验逻辑如何，最终JS计算都应该返回一个对象：

{
  validateStatus: value ? "success": 'error',
  help: !value? "内容不能为空" : ''
}

比如我们给姓名字段一个自定义校验规则：必填而且长度大于2，整体流程如下： 自定义规则流程 JS计算组件的输出要连接到姓名输入框，进行“设置校验结果”

JS计算组件的配置如下：

({ outputs, inputs, logger }) => {
  const [ inputValue0 ] = inputs;
  const [ output0 ] = outputs;

  const isEmpty = !inputValue0;
  const tooShort = inputValue0.length <= 2;

  output0({
    validateStatus: !isEmpty && !tooShort  ? "success": 'error',
    help: isEmpty ? "内容不能为空" : tooShort ? "长度必须大于2" : ''
  });
}

完整配置​

表单容器​

属性名称说明
类型普通表单、查询表单
默认折叠表单项查询表单可用，折叠超出范围的表单项，可以手动展开或收起
提交隐藏表单项字段提交时收集被隐藏的表单项字段，默认不收集被隐藏的表单项字段
动态设置表单项开启后可以用JS控制整个表单的表单项结构
自动滚动到错误位置开启后，在校验失败时触发

表单项布局​

属性名称说明
类型表单项Lable与空间的位置：水平或垂直
启用24栅格布局系统默认开启，此时可设置表单项宽度和列间距；如果关闭，则需要设置每行列数
尺寸默认、小、大

移动端配置​

属性名称说明
宽度适配表单布局为水平下生效，默认开启，antd内置样式会使标题和表单项内容展示为两行；关闭后，水平模式下，展示成一行

标题​

用来控制表单项的Label

属性名称说明
宽度类型固定像素、24栅格
标题超长配置超长省略、自动换行、默认
显示冒号是或否

事件​

属性名称说明
字段值更新任意字段值变化时触发