field-form
field-form copied to clipboard
Any reason why `validateFields` is async, but `submit` and `onFinish` are not async?
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>
https://github.com/ant-design/ant-design/issues/31152