组件值改变的回调
update 回调和 link 字段允许您在表单组件的值发生变化时,动态修改其他组件的属性或值。这个功能在创建复杂、动态的表单时非常有用,例如:根据用户输入动态调整表单的显示状态、必填规则、禁用状态等。
推荐使用功能更强大的计算规则功能,具体用法请详细阅读计算组件规则文档。
数据结构
type UpdateArg = {
//触发方式:可能是由初始化、值变化或字段联动引起的触发
origin: 'change' | 'init' | 'link'
//关联触发的字段名,当 origin 为 'link' 时有效
linkField: string | undefined;
}
type Update = (val:any, rule:FormRule, api:Api, arg: UpdateArg)=>boolean|undefined;origin 选项
- init: 初始化时触发,通常在组件第一次加载时触发。
- link: 当其他字段联动影响当前字段时触发。
- change: 当字段的
value发生变化时触发。
注意
组件的 update 回调会在初始化完成后立即自动执行一次。
示例
更新当前组件
使用update回调函数动态更新组件属性:当输入框的值发生变化时,自动将组件的标题同步更新为当前输入值,实现表单组件属性的实时联动效果。
更新其他组件
通过update回调和api方法实现双向联动:当input1或input2的值发生变化时,互相更新对方的标题属性,实现两个表单字段之间的实时动态交互。
关联字段变化时触发
通过link属性建立字段关联:当input1的值发生变化时,自动触发input2的update回调函数,动态更新input2的标题为当前时间戳,实现跨字段的联动更新机制。
更新显示状态
通过update回调控制组件显示状态:当输入框的值为空时,自动隐藏该组件,实现根据输入内容动态控制组件可见性的功能。
控制组件显示状态
输入框 1 为空时隐藏输入框 2,有内容时显示。
修改指定组件属性
评分超过 3 星时,评论最多输入 500 字,否则最多 200 字。
组合计算字段值
数量或单价变化时重新计算总价。link 让单价变化也触发数量字段的 update。
更新选择项
分类变化时更新产品选项,并清空已选产品。
触发来源
update 的第 4 个参数可以区分触发来源。初始化为 init,当前字段变化为 change,link 字段变化为 link。
切换禁用
未同意协议时,账号输入框保持禁用。
切换必填
原因选择「其他」时,说明变为必填。
通过 update 回调,您可以实现表单中组件间的复杂交互逻辑。无论是简单的动态显示与隐藏,还是复杂的值联动与计算,update 回调都能提供强大的支持。结合 link 配置项,您可以更方便地实现组件之间的联动,使表单更加智能和动态。通过以上的示例和解释,相信您能更好地理解和应用 update 回调功能。


