Open
Description
Description
When building a form stepper, like so:
It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add complex logic.
Ideally, it would be nice to have a FormGroup where you could validate the group, but not the form itself - submit the value and move on to the next step.
Describe the solution you'd like
What if there was something like this psuedo-API?
import { useState } from "react";
import { useForm } from "@tanstack/react-form";
// Import might change
import { za } from "@tanstack/zod-form-adapter";
const StepperForm = () => {
const [step, setStep] = useState(0);
const form = useForm({ onSubmit: () => {} });
return (
<form.Provider>
<form {...form.getFormProps()}>
<div>
{step === 1 && (
<form.FormGroup
onGroupSubmit={() => {
setStep(step + 1);
}}
preserveState={true}
>
<form.Field
name="step1.name"
onSubmit={za(z.string().thing())}
onGroupSubmit={za(z.string().thing())}
>
<Input />
</form.Field>
</form.FormGroup>
)}
{step === 2 && (
<form.FormGroup onGroupSubmit={submit} preserveState={true}>
<form.Field
name="step2.name"
onSubmit={za(z.string().thing())}
onGroupSubmit={za(z.string().thing())}
>
<Input />
</form.Field>
</form.FormGroup>
)}
</div>
</form>
</form.Provider>
);
};