最近项目经理提了一个新需求,要求表单提交时触发校验会自动跳转至第一个校验项,查看了antd官方文档,进行了以下几种尝试:
一. scrollToFirstError
直接在Form中配置scrollToFirstError发现触发校验时并没有跳转,后面经过N次调试,发现是因为提交表单时没有触发form.submit()。因为我这里是个弹窗,提交方法直接写在了Modal的onOk方法中,所以我直接在方法里补充了form.submit(),提交失败自动滚动到第一个错误字段效果就实现了,但是这种方法修改成本比较高,并且还要手动触发form.submit(),感觉不是很好。
二. scrollToField
继续查看文档发现还有个Api可以将表单滚动到对应字段位置。因为提交失败时,catch中会返回失败信息,所以直接在提交方法的catch中补充一行代码form.scrollToField(error?.errorFields?.[0].name)就行了,相比于第一种方法修改成本比较低,且不需要手动触发表单提交。
以上就是Form表单之校验跳转小记,随笔记录下,以防忘记。