【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);
      });