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