ant-design/pro-components

🐛[BUG] validateTrigger="onBlur" validation not working

Opened this issue · 4 comments

Ladvace commented

I tried to apply a validateTrigger="onBlur" on a ProForm.Item but the validation doesn't seems working, I'm using it on a stepForm

github-actions commented

以下的 Issues 可能会帮助到你 / The following issues may help you

  • [#8006][🐛[BUG]Table.EXPAND_COLUMN not working][60%]
SANmq commented

validateTrigger 为 onBlur没生效的原因找到了。因为源码中有一个WithValueFomFiledProps组件分隔了form.item和表单组件间的props传递。其中有一个判断
const isProFormComponent = // @ts-ignore filedChildren?.type?.displayName !== 'ProFormComponent';
如果为false的话会导致很多props不会透传给antd的form.item。这个干嘛用的不太清楚。
所以解决方案可以是给自己自定义的组件加上 displayName ="ProFormComponent" 属性就能解决。
不过这个应该不是最终解决方案，还是得看它原来是要干嘛
@chenshuai2144

SANmq commented

重新看了一下就是onBlur没有传进去，跟isProFormComponent无关。
const { children: filedChildren, onChange, onBlur, ignoreFormItem, valuePropName = 'value', ...restProps } = formFieldProps;
omitUndefined({ ...restProps, [valuePropName]: formFieldProps[valuePropName], ...filedChildren.props, onChange: finalChange, fieldProps, })

就是restProps中没有onBlur了,所以没有透传给proformItem下的组件

taajason commented

在使用 2.7 版本的时候，发现是可以的
当在rules中设置时，无法触发校验，如下：
<ProFormText rules={[ { required: true, validator: validatorFunc, validateTrigger: "onBlur" }, ]} />
当validateTrigger属性放在ProFormText中时，触发可以生效
<ProFormText validateTrigger="onBlur" rules={[ { required: true, validator: validatorFunc }, ]} />
官方文档中也是如此设置，希望有帮助！