Skip to content

组件值改变的回调 ​

update 回调和 link 字段允许您在表单组件的值发生变化时,动态修改其他组件的属性或值。这个功能在创建复杂、动态的表单时非常有用,例如:根据用户输入动态调整表单的显示状态、必填规则、禁用状态等。

推荐使用功能更强大的计算规则功能,具体用法请详细阅读计算组件规则文档。

数据结构 ​

typescript
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 回调功能。

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用