Formik: Multistep form

[goodmind]

How to make multistep form (aka wizard) with distinct submit buttons, but one form state?

[jaredpalmer]

You can use status and setStatus or use multiple Formik components that handleSubmits lift up state

[jaredpalmer]

hey, this should be relatively straight forward with the render props API.

[goodmind]

@jaredpalmer hello, I tried to do something like this and found that I need intermediate API requests between some steps, this should be in components or in Formik HOC? https://codesandbox.io/s/Bgm22vjyo

Also this looks pretty verbose

[jaredpalmer]

This is quite elegant. This should be even easier with the <Formik/> component now

[goodmind]

@jaredpalmer any examples?
Edit: Oh, you added this to ToDo, thanks!

[jaredpalmer]

Yeah yours is how I would do it. I would just put async sideeffects inside of nextStep

[goodmind]

@jaredpalmer well, can you make it into official examples? Also I don't get how would I get field values in nextStep?

[dineshdoshi]

@goodmind @jaredpalmer Could you please update the example https://codesandbox.io/s/Bgm22vjyo to validate the field on first step and then go to next step. Thanks

[willopez]

@jaredpalmer thanks for this lib, I believe it addresses one of the most painful aspects of using Reactjs, forms :( A plus 1 for this wizard feature! Thanks!

[jaredpalmer]

I think there is a cool way to do this using render props and a <Wizard step={1} /> component

[willopez]

That seems like a better approach, more than 4 levels of composition makes my head start spinning. I am thinking that the Wizard component would have a management responsibility, it would manage displaying the form corresponding to the specified step. Further, it would merge all the data from the forms it manages and it would submit it. Each step form could be self contained, meaning it would have its own elements, validation etc... and it would elevate its state to the Wizard component, just some food for thought.

[jaredpalmer]

100% agree @willopez

[adamduncan]

Love the approach! @willopez, do you think per-step validation would be easy enough to fold in? I guess each form's step would manage its own validationSchema? 🤔

[willopez]

@adamduncan Yeah, I was thinking that each step from would handle it's own validation. Whether it's easy enough to implement... we will see.

[jaredpalmer]

See multistep example

[ikashifullah]

@jaredpalmer, thank you for Multistep Form, but I am getting this error, and I am very new to React, could you please see this codeSandBox and let me know why I am getting this issue:

https://codesandbox.io/s/pp0p6p6qx0

Thank you

[ikashifullah]

@jaredpalmer I fixed the issue, I just change the following line:

static Page = ({ children }) => children;

to

static Page = ({ children }) => {
    return <div>{children}</div>;
}

OR

static Page = ({ children }) => <div>{children}</div>

And it worked!

Thank you so much for amazing form plugin!

[LiranBri]

Thank you for the example.

Just a small comment..
It feels wrong that the parent defined the logic of the internal page validation from outside.
for example, it would be hard to extract the page to its own component right now because of this

I would use refs to call the page's validate method, instead of the props trick. something like this.

alternatively, we can define the validate method as a static method of the page (its fine since its stateless anyway), and then just call it.

Edit: I implemented the above. If you agree with me and interested, I can send a PR

[Manocry]

@jaredpalmer, thank you for Multistep Form, but I am getting this error, and I am very new to React, could you please see this codeSandBox and let me know why I am getting this issue:

https://codesandbox.io/s/pp0p6p6qx0

Thank you

Great exemple.
How to init the initial value with api call instead of the following :
initialValues={{
firstName: "",
lastName: "",
email: "",
favoriteColor: ""
}}

[HPieters]

@jaredpalmer, thank you for Multistep Form, but I am getting this error, and I am very new to React, could you please see this codeSandBox and let me know why I am getting this issue:
https://codesandbox.io/s/pp0p6p6qx0
Thank you

Great exemple.
How to init the initial value with api call instead of the following :
initialValues={{
firstName: "",
lastName: "",
email: "",
favoriteColor: ""
}}

@Manocry I think StackOverflow or similar is a more appropriate channel for your question as it is not really an issue with the library?

A approach here would be to call your API and use set state for instance. You can simply pass state to the initialValues={this.state.theValuesInState}. You can either choose to not show the form until the API call has been completed, or set the initial state to be empty and see the magic happen once you update state after the API call returns.

[devjones]

@LiranBri Can you post a public sample of that code using the in page validation?

[abohannon]

How are you all passing props to the children of ? I'm doing the following but running into unexpected behavior (e.g. props being nested and not passing as expected). I need to pass the errors object + blur and touched props to the inputs so they may render their respective error messages.

// inside Wizard.jsx
static Page = ({ children, ...rest }) => {
     return Children.map(children, child => cloneElement(child, { ...rest }))
   }

EDIT: found the solution. Might have missed this in the docs, but if not I think it would be useful to add.

If you need to get formik form props down to your inputs, using the render prop on the component and passing the form prop does the trick.

Referenced here: https://stackoverflow.com/questions/54493071/how-to-pass-values-from-a-component-into-formik-multi-step-form-wizard

The lack of documentation aside, continuously impressed by the elegant solutions provided by this library. Cheers @jaredpalmer for all your hard work!

// Example from my project
<Field
          name={name}
          type={type}
          validate={validate}
          render={({ field, form }) => (
            <Input
              {...commonInputProps}
              {...field}
              {...form} // pass form props to input
            />
          )
        }
        />

[mjangir]

I've built a nice wizard component for formik. Please check out here:

https://github.com/mjangir/formik-wizard-form

[sunviwo]

Please @mjangir , can your package be used in React Native?