需求:多个表单,我想一起校验一起提交,比如这里的上下两个部分为两个组件,两个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); });