在一个需要分页处理的Form 组件里,由于需要将不同的form逻辑组装成一个Form ,所以需要将校验的逻辑放在单独的方法里,用到的是 Form 的 form.validateFields 方法.
其中一个Form 用到的是 Form.List 组件.这带来的问题就是,由于 List 组件的获取逻辑是数组类型的 NamePath 参数.在校验逻辑上来看,是个二维数组.导致的结果就是在单独校验Form 规则时,无法校验 Form.List 所组成的表单.
在掘金上看到的一篇文章,很好的解释了 validateFields 函数所需参数是什么格式的.
在普通的校验下, validateFields 需要的只是一个包含所有需要校验的字段名数组,例如:
form.validateFields(['name','id']).then((value) => {
console.log(value)
})
而在存在 Form.List 的情况下,代码的书写可能是这样:
可以看到获取的值是一个二维的形式,所以对应到校验的 NamePath ,形式应该是:
['names', 0, 'name-1']
['names', 1, 'name-2']
所以在代码里,如果需要校验一个带 Form.List 的表单时,可以这么处理:
const nameList = [({ name: 'name1', id: 0, phone: '123123' }, { name: 'name2', id: 1, phone: '2333333' })]
const userMap = nameList.map((v, k) => {
return ['name', 'id', 'phone'].map(n => ['users', k, n])
})
console.log(`userMap`, userMap)
然后再根据需要展平数组,确保 validateFields 的参数时一维数组.