lljj-x / vue-json-schema-form

基于Vue/Vue3,Json Schema 和 ElementUi/antd/iview3/naiveUi 等生成 HTML Form 表单,用于活动编辑器、h5编辑器、cms等数据配置;支持可视化生成表单Schema 。 Generate a form using Vue/Vue3, Json Schema and ElementUi/antdv/iview3/naiveUi
https://form.lljj.me/
Apache License 2.0
2.01k stars 418 forks source link

在vue2-form-core中formItem的校验规则validator只能使用callback的方式 #316

Closed Florian-lan closed 11 months ago

Florian-lan commented 11 months ago

反馈问题请先查看文档和务必提供详细的复现代码,遵循如下格式,描述不清楚的问题将会直接关闭。

vue和ui框架

vue2+tdesign

问题描述

在基于vue2-form-core给tdesign做适配时,tdesign中formItem自定义校验规则validator的形式为 type CustomValidator = (val: ValueType) => CustomValidateResolveType | Promise<CustomValidateResolveType>, 只传递表单值value,并且返回一个对象表示结果而不是使用callback进行回调。 在vue2-form-core中formItem的rules中validator必须依赖于callback,导致适配tdesign时callback为空 调用失败

如何复现

当前解决方式是在tdesign的formItem定义时,传入自定义callback函数

 validator(rule, value) {
     return validateRule.validator(rule,value,callback);
},

同时在vue2-form-core打补丁(patch-package), 在formItem虚拟节点创建时,为value赋值value = self.value,避免value被覆盖获取不到表单值的情况。

期望的结果

扩展vue2-form-core中formItem节点兼容性,支持自定义callback函数; (仅为抛砖引玉,看大佬有什么更好的办法)

lljj-x commented 11 months ago

是的,底层core 都是默认按了element vue2的版本格式来的。

这里只需要你在适配 formItem 组件的时候做对应的转换即可 callBack 转为 promise 到tdesign 的formitem

lljj-x commented 11 months ago

看了下 之前vue3的版本 在core里面直接做了兼容,这里也可以vue2 core 补上相似逻辑。

当然你也可以直接贡献 😁

lljj-x commented 11 months ago

最新版已支持 直接使用promise