NaiveUi 嵌套表单校验

628 阅读1分钟

最近开发时,遇到一个需求:使用naive 的form 表单,其中一个formItem 里嵌套了一个另外一表单,要求父表单校验时,子表单也可以自动校验。

话不多说,直接上代码:

父组件

子组件

以上代码中最重要的是 handleContentBlur方法的调用,这个方法是naiveUI 中内置的 校验方法。

起初的思路时,创建子表单组件并暴露出去,在父表单校验规则中,调用子表单的validate 方法,这样就可以实现子表单的校验。但是还是存在一个问题:子表单的选项在修改时,无法实时校验。

于是带着问题,去翻一下naive的源码,看一下有没有解决的方法。

form 的validate 方法实际上是调用的是每个formIte 中的 validator:

image.png

接下来找到 FormItem 中查找 internalValidate 方法:

发现在处理不同trigger时,调用了internalValidate 方法,接着发现 FormItem 使用 provide 向后代中提供了 以上四种触发方法:

看到这里,发现formItemInjectionKey 是在其他文件引入的,想到大部分的注入名都会使用Symbol,觉得没啥希望了,进到formItemInjectionKey 出处看一下吧。

呀,竟然是普通的字符串,这下就好办了,直接在子组件中inject 一下 handleContentBlur, watch 到子表单 model 变化时,调用该方法就行了。 ok,大功告成~~~