field-form icon indicating copy to clipboard operation
field-form copied to clipboard

Any reason why `validateFields` is async, but `submit` and `onFinish` are not async?

Open plandem opened this issue 3 years ago • 1 comments

That inconsistency brings some level of headache dealing with forms linked via Form.Provider. E.g. we need to call validation for all forms and at the end get values, but calling something to finalize these values before (onFinish and submit are good candidates, but they don't return any values and not async as well).

const onFormFinish = async (name, { forms }) => {
   if(name) {
      return;
   }

   try {
      // e.g. we could use async `submit` + `onFinish` or `submit` + validation rule for `onSubmit` for that
      const values = await Promise.all(Object.values(forms).map(f.submit));
      const payload = values.reduce((result, next) => ({ ...result, ...next }), {});

      // save payload combined from all sub-forms and extra transformations from onFinish when required
      const response = await onSave(payload);
   } catch (e) {
      console.log(e)
   }
}

const onInfoFinish = async(values) => {
   // do something not related to form/fields directly, 
   // e.g. some extra backend requests that we cant do during validation, but should be present in final payload
   const uuid = await getUUID(values);

   // values transformed after that extra requests - e.g. attached some UUIDS
   return {...rawValues, uuid }; 
}

<Form.Provider onFormFinish={onFormFinish}>
   <Form name="info" onFinish=(onInfoFinish}>
     // sub-form with extra processing for values after successful validations
   <Form>

   <Form name="details">
     // sub-form without any extra processing
   <Form>

   <Form>
     // sub-form that triggers saving process
     <Button htmlType="submit">Save</Button>
   <Form>

</Form.Provider>

plandem avatar Jun 26 '21 21:06 plandem

https://github.com/ant-design/ant-design/issues/31152

plandem avatar Jun 26 '21 22:06 plandem