T
TanStack•2w ago
foreign-sapphire

What is the best way to create a multistep form?

Would be awesome to have an example in thedocs. I have tried a few different ways but none seem great. The most promising one was to use on submit + validators on the individual fields. But this doesn't work because if the user navigates to page 2, doesn't fill anything out then goes back to page 1. He is now locked out of the form because the page 2 fields are in the form state....
2 Replies
national-gold
national-gold•2w ago
A clean API's being worked on, but you can check out how https://tancn.dev/ manages it
tancn
TanCN - Form and Table Builder
Help you Quickly Scaffold Forms and Tables using TanStack Libraries
foreign-sapphire
foreign-sapphireOP•6d ago
Thank you so much for sharing this! Super interesting and useful. Unfortunatly it didn't answer my question completely. Still not 100% clear to me how errors are meant to be propagated to the field values. From the lib you mentioned: 
    const triggerFormGroup = async (form: AnyFormApi) => {
        const result = currentValidator.safeParse(form.state.values);
        if (!result.success) {
            await form.handleSubmit({ step: String(currentStep) });
            return result;
        }

        return result;
    };
    const triggerFormGroup = async (form: AnyFormApi) => {
        const result = currentValidator.safeParse(form.state.values);
        if (!result.success) {
            await form.handleSubmit({ step: String(currentStep) });
            return result;
        }

        return result;
    };
So on fail of validation it doesn't seem like it is actually providing input to the user. Unless I'm missing something I figured it out. It uses dybamic. Duplicares the validation logic across submit and next step and on a failure validates the step twice. Which is rather nasty 🥲

Did you find this page helpful?