subformik v0.1.2
SubFormik - Nested reusable forms for Formik
Rationale
Vanilla Formik stores the form's state as a unique object.
When the form's state is highly structured, it gets hard to maintain nested states, because fields must access their own little state from the absolute root e.g. <Field name="user[3].books[2].title" />
.
In addition, it makes it tedious to create reusable forms.
SubFormik brings the simplicity, flexibility and reusability of having subforms which only have to care about their own state and validation.
Setup
npm i subformik
In vanilla Formik, you would have something like that:
<Formik validateSchema={completeFormSchema}>
<Form>
<Field name="city" />
<Field name="user[3].age" />
</Form>
</Formik>
With SubFormik, just replace <Formik>
by <SubFormikRoot>
:
<SubFormikRoot validateSchema={rootValueSchema}>
<Form>
<Field name="city" />
<SubFormik path="user[3]" validateSchema={userSchema}>
<Field name="age" />
</SubFormik>
</Form>
</SubFormikRoot>
You can see that <Field name="age" />
is local to its closest SubFormik
context.
<SubFormik />
creates a nested <Formik />
context under the hood.
You can then use useFormikContext()
exactly the same way you would do with vanilla Formik.
A more complete working demo is available here: Demo.
Validation and error management
All provided validation functions and schemas are run and the results are aggregated into a global error object:
const { errors } = useFormikContext() // done at the root level
{
city: "City must be longer than 1 character",
'user[3].age': 'Age cannot be negative',
}
Then re-dispatched to the subforms:
const { errors } = useFormikContext() // done at the `user` subform level
{
age: 'Age cannot be negative',
}
This design allows you to make each subform only care about its own state, its own validation strategy, and its own errors.
Roadmap
- I dont like the name of
<SubFormikRoot />
. If you have a suggestion, feel free to propose.
Beside that, nothing specific for now.
It is very possible that a feature available with vanilla Formik is currently not with SubFormik. If you think such feature can benefit everybody, feel free to ask for it, or propose a PR.