如何使用数据输入类组件|飞书低代码平台

前言

本文的表单是指「表单」组件和相关「数据输入」组件的使用指导文档，即指「数据输入」分类下的组件。

名词解释

输入类组件

可以生产数据的组件，目前输入类组件指「数据输入】分类下的组件，包括表单。

250px|700px|reset

数据对象

「对象」是「数据」的核心载体之一，能够对数据进行结构化存储。通过设置「对象」的不同字段，可以收集多元的数据，并被应用内各个模块调用。数据对象是飞书低代码平台下的重要资产之一，详情可以参考：认识数据

250px|700px|reset

值类型

「数据输入」组件中可以引用和生产的类型是固定的，需要给组件合适的数据才能正常运行，目前组件可以引用/生产的类型查看附录：数据在表单场景下的使用现状

案例实践：

Case 1: 如何使用独立「数据输入」组件

目前一共提供 10 个基础的输入组件可以供独立搭建使用。每个输入组件会提供一些公共可以使用的方法/属性/事件来供用户来进行消费使用。下边是输入组件公共属性的一览表

输入组件公共能力

能力分类	名称	标识名	描述
属性	标题	label	输入组件标题信息
属性	提示文字	tooltips	输入组件提示文字
数据	值	value	输入组件暴露值
方法	校验	validate	执行组件校验，如果不满足校验配置则会提示报错信息
方法	重置	reset	重置输入组件的值，还原成输入组件的默认值
方法	清空	clear	清空输入组件的值为undefined
方法	设置值	setValue	更新输入组件的值
方法	设置错误信息	setError	更新输入组件的错误信息（会阻塞提交）
方法	设置隐藏	setHidden	隐藏输入组件，会保留组件的数据
方法	设置禁用	setDisabled	将组件设置为禁用（表单内会优先消费表单状态）
方法	设置只读	setReadonly	将组件设置为只读（表单内会优先消费表单状态）
事件	值改变时	onChange	当输入组件值变化时触发

Case 2: 如何使用表单

表单是模型驱动表单，表单的使用需要结合数据对象来完成。

拖入表单组件后初始示意如下图，其中提交按钮会默认绑定表单的提交事件。

250px|700px|reset

新增「表单」

我们来简单搭建一个新增数据的使用场景：

拖入一个表单和一个数据表格，数据表格用来查看已经新增的数据。

具体配置：

表单绑定数据对象“全类型”。

增加字段“文本”、“整数”、“浮点数”、“日期”、“日期时间”、“搜索名”。

数据表格绑定相同的数据对象“全类型”，增加字段“文本”、“整数”、“浮点数”、“日期”、“日期时间”、“搜索名”。

表单配置事件 >> 提交时，配置动作「新增记录」，对象选择「全类型」，变量选择「表单.值」

250px|700px|reset

预览看下配置效果：

250px|700px|reset

编辑「表单」

编辑场景和新增场景基本相同，只是需要额外修改两个配置：

将表单的「关联记录」绑定到你所需要修改的记录数据，这里我选择「数据表格」>>「点击的行」

📌

请选择数据对象相同的记录哦！

250px|700px|reset

将表单提交时的事件动作修改为「更新记录」

250px|700px|reset

预览查看搭建效果：

250px|700px|reset

在「流程」中引用「表单」

将表单提交到流程里进行消费需要将表单的数据和流程里的记录类型入参进行绑定，以下是示意搭建链路。

创建一个直接运行流程“测试流程消费表单”，增加一个入参为“全类型”的记录类型变量“测试”。

创建一个新增记录的节点，使用记录数据“测试”来创建记录

250px|700px|reset

表单的“提交时”事件动作切换为执行流程，流程选择“测试流程消费表单”。变量测试选择“表单.值”（前置配置和新增链路相同）

250px|700px|reset

预览看下配置效果：

250px|700px|reset

Case 3: 如何实现自定义校验

自定义校验是一个很常规的表单的搭建场景，下边我们基于刚刚的新增表单，通过输入组件的setError（设置错误信息）方法，增加一些定制的校验逻辑。

假设我们设定：文本输入的开头必须以“今天天气真好开头”：

给文本增加事件-值改变时，增加“执行JS动作”，配置代码如下：

250px|700px|reset

if(!textinput_1.value.startsWith('今天天气真好')) {    textinput_1.setError("请以【今天天气真好开头】")} else {    textinput_1.setError()}}

预览配置效果如下

250px|700px|reset

Case 4: 如何实现联动

值联动

值联动是表单场景下的基础联动能力，指用户主动将数据赋值给组件，常见的场景如：

场景一：选择了商品，对应 SKU 的名称需要默认修改为商品名称。

场景二：修改了用户的生日，需要默认修改用户年龄。

配置方法：

方法一：使用无码方式配置值联动

动作：在需要配置联动的事件动作里，配置动作为与组件交互。

250px|700px|reset

选择组件：选择需要被更新数据的输入组件。

250px|700px|reset

选择方法：选择组件方法为「设置值」。

250px|700px|reset

设置参数：将合适的数据传递给对应的输入组件。

250px|700px|reset

方法二：使用JS配置值联动

动作：在需要配置值联动的事件动作里，选择「执行 JS 动作」。

250px|700px|reset

在对应的 JS 动作内，执行输入组件的setValue方法，并将合适的数据写入。

250px|700px|reset

代码示例：

// dropdownselect_2 指被更新值的输入组件// setValue 指赋值方法// dropdownselect_1.value 指需要更新的值dropdownselect_2.setValue(dropdownselect_1.value))

效果演示

250px|700px|reset

【ALERT】注意事项

「值联动」需要将合适的数据赋给组件（参考名词解释-值类型），才可以正常运行。

显隐联动

📌

显隐联动需要通过输入组件-状态-隐藏的配置来完成，不要使用「显隐设置」哦。

输入组件上的隐藏配置可以来完成一些显隐联动，比如当一个输入组件被隐藏时：

它的数据可以访问

它的数据不参与校验

250px|700px|reset

配置方法

方法一：通过属性配置

如下图，可以通过属性配置完成

250px|700px|reset

方法二：通过js动作配置

如下图，通过执行js动作，来更新输入组件的隐藏状态

250px|700px|reset

附录：数据在表单场景下的使用现状

输入组件	声明类型	获取的数据预期	实际获取数据	输出类型
下拉选择【单选】【数据对象】	Lookup	Number	{id: Number} \| {_id:String}	{ _id: Number}
下拉选择【单选】【选项】	Enum	String	String	Enum
下拉选择【单选】【自定义｜ fx】	T	T	String	String
下拉选择【多选】【数据对象】	LookupMulti	Number[]	Number[]	{ _id: Number}[]
下拉选择【多选】【选项】	EnumMulti	String[]	String[]	Enum[]
下拉选择【多选】【自定义｜ fx】	Array<T>	Array<T>	String[]	String[]
文本输入	Text	Text	String	Text
数字输入	<BigInt \| Float \| Decimal>	<BigInt \| Float \| Decimal>	Number	Number
行政区划	<Region \| Region[]>	<Region \| Region[]>	{id: Number} \| {id: Number}[]	{id: Number} \| {id: Number}[]
文件	Attachment	{ type:"Attachment" id: String, mime_type: String token: String size: Number, name: String, }	{ id: String, mime_type: String token: String size: Number, name: String, }	{ id: String, mime_type: String token: String size: Number, name: String, }
日期	Date	String	String	String
日期时间	DateTime	Number	String	Number
邮件	Email	String	String	String
多语	Multilingual	{ type:"Multilingual", value:{ text: String, language_code: Number, isEmpty: Boolean, }[] }	{ text: String, language_code: Number, isEmpty: Boolean, }[]	{ text: String, language_code: Number, isEmpty: Boolean, }[]
富文本	RichText	{ type:"RichText"; raw: string; config?: any[]; preview?: string; }	{ raw: string; config?: any[]; preview?: string; }	{ raw: string; config?: any[]; preview?: string; }
开关	Boolean	Boolean	Boolean	Boolean
头像	Aavtar	{ type:"Aavtar", source: String, color_id: Number, image: { large: String, imageId: String, }, }	{ source: String, color_id: Number, image: { large: String, imageId: String, }, }	{ source: String, color_id: Number, image: { large: String, imageId: String, }, }

如何使用数据输入类组件|飞书低代码平台

先进团队，先用飞书