【antd】表单-单页面多表单提交功能

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

需求:多个表单,我想一起校验一起提交,比如这里的上下两个部分为两个组件,两个form表单

功能点:1.所有报表需通过校验

2.通过校验后提交并带入所有参数

核心问题:form表单的validateFields()返回的是一个promise对象,也就是说他是一个异步方法,对标的的校验必定有异步问题.而且无论前一个表单校验成功与否,后一个表单都需要继续校验.只不过只要有不通过的,就不提交.

解决方案:

1.无论成功与否都需要继续,即不分前后. Promise.all()

2.校验接受后需要拿到对应的表单值 .新建一个promise对象,res返回对应表单values.失败即返回失败

所以,把每个表单的校验过程都注册成一个promise对象,在validateFields().then()里面返回values,在.catch返回失败信息,然后用Promise.all()统一提交和监听,在.then()里面能拿到所有表单返回的values,然后统一处理提交.

代码:

formList.length > 0 &&
formList.map((item, index) => {
let promiseObj = new Promise((res, rej) => {
item.form
.validateFields()
.then((values) => {
res(values);
})
.catch((error) => {
rej('失败');
});
});
arr.push(promiseObj);
});
Promise.all(arr)
.then((res) => {
if (res.length > 0) {
res.map((item) => {
allParams = { ...allParams, ...item };
});
dispatch({
type: 'common/submit',
payload: { ...allParams },
});
}
})
.catch((error) => {
console.log('error', error);
});