react-component / react-component/field-form
Any reason why `validateFields` is async, but `submit` and `onFinish` are not async?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 286
- Avg merge
- 4d 16h
- Merged PRs (30d)
- 1
Description
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>
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the Form.Provider flow and the validateFields, submit, and onFinish entry points described in the issue. Compare their current asynchronous behavior and define how submitted or transformed values should propagate across linked forms; done means the proposed contract supports the combined payload workflow without ambiguity.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100