How to capture individual step submissions?

[bearstudio]

How to capture individual step submissions?

[ivan-dalmet]

Hi @jcbbb 😃
Thanks for the feedback. That is a good idea.
For now I can propose you the following way to handle it :)
(I didn't test the code, so don't hesitate to open a codesandbox if you are facing issues)

const MyForm = () => {
  const myForm = useForm()

  const submitStep = async (e) => {
    e.preventDefault()

    if (!myForm.currentStep || !myForm.currentStep.isValid) {
      // Trigger only the Formiz submitStep
      myForm.submitStep()
      return
    }

    if (myForm.currentStep.name === 'step1') {
      await apiCallForStep1(myForm.values)
    }

    if (myForm.currentStep.name === 'step2') {
      await apiCallForStep2(myForm.values)
    }

    // Trigger the Formiz submitStep
    myForm.submitStep()
  }

  return (
    <Formiz connect={myForm}>
      <form
        noValidate
        onSubmit={submitStep}
      >
        <FormizStep name="step1">
          // Fields
        </FormizStep>
        <FormizStep name="step2">
          // Fields
        </FormizStep>
        <button type="submit">
          {myForm.isLastStep ? 'Submit' : 'Next'}
        </button>
      </form>
    </Formiz>
  )
}

Hope this can help :)

[jcbbb]

Yeah, looks like it would work. I will try this out and report back.

Thank you!

[jcbbb]

I tried your code and as submitStep requires event object, I had to pass it to avoid undefined event error.
But when I submit the step, it's going to the next step with already shown errors event when I didn't event touch any of the fields.

  const submitStep = async (event: React.FormEvent<HTMLFormElement>) => {
    event.persist();
    if (event) event.preventDefault();

    if (!myForm.currentStep || !(myForm.currentStep as any).isValid) {
      myForm.submitStep && myForm.submitStep(event);
      return;
    }

    const stepName = (myForm.currentStep as any).name;
    if (stepName === 'step_1') {
      await createTempUser(myForm.values?.email);
    }

    if (stepName === 'step_2') {
      const { email, authCode } = myForm.values;
      await verifyAuthCode({ email, authCode });
    }

    myForm.submitStep && myForm.submitStep(event);
  };

You can observe the behavior live here. Just try signing up, not login.
And full code here

[ivan-dalmet]

For the event that you need to pass it's a little type issue, my bad. I will try to fix that when I will have time because the event should not be required.
For the error display, I'm not sure to know what happen.

I'm currently on business trip so I don't have much time. I will try to take some time next week to test your use case.
If you want to understand a little more what happen you can debug the myForm like that {JSON.stringify(myFrom, null, 2)}

Also I see in your code the way you test the email field. You can use asyncValidations for that :) You can see the email use case in the examples https://formiz-examples.netlify.app/

[jcbbb]

No problem, take your time.

I did not know about asyncValidations. That sure will make it easier. Thanks

[ivan-dalmet]

@jcbbb I had time to implement an example and I don't get your bug :/
You can see the example here https://formiz-examples.netlify.app/wizard
And the code here https://github.com/ivan-dalmet/formiz/blob/master/examples/src/pages/Wizard.js

[jcbbb]

@ivan-dalmet Hey, I think it's a type issue. I see you are using vanilla js in your examples. I was using typescript with React, and I am getting type errors all over the place. For example, when I do form.submitStep(), I get TypeError saying form could be undefined. So, I fix it with if statement like so:

if(form.submitStep) {
    form.submitStep() // Expected 1 arguments, but got 0.
}

I think event should be made optional
See the example code I am using here

[jcbbb]

But, I saw your typings and event is optional in submitStep function, so I don't really know the problem here.

[ivan-dalmet]

@jcbbb Oh sorry for this type issue, I've fixed but not published yet. I was searching for this issue "it's going to the next step with already shown errors event when I didn't event touch any of the fields."

[ivan-dalmet]

@jcbbb Let met publish the new version with the type fix :)

[jcbbb]

No problem. Are you going to publish soon?

[jcbbb]

Thanks, I will wait then :)

[ivan-dalmet]

@jcbbb Version 1.0.0-rc.25 is available and should fix the type issue :)

[jcbbb]

Thanks, I will upgrade now.

[jcbbb]

Hi, how are are you?

Is it possible to disable next step or any other step based on api call?

Let say, I have user's id/token, and I fetch their data from backend and check if their passport is verified. If it's already verified, I want to submit the form at that step without going any further (disabling other steps). If not verified it goes to the next step and there are options to skip or submit. If skipped, I want to go to next step and ask for firstname and lastname, if user chooses to go through verification, and verification is successful, I want to disable the step where it asks for firstname and lastname, and go the next enabled step and so on. Right now, it's resetting back to first step when I submit passport details.

Here is a codesandbox link if you want to take a look at it.

Thank you.

[ivan-dalmet]

Hi @jcbbb sorry for the delay of answering. Just had a baby 👶

I will try to look at it tomorrow (I'm on mobile now).

[jcbbb]

Congratulations! Take your time, no rush

[ivan-dalmet]

@jcbbb I just looked your code, the issue is that the user is updated with verified: true on the pass step.
So the pass step become disabled. And if the current step is disabled Formiz prevent a blank screen by going to the previous step.

Your current code

<FormizStep name="pass" isEnabled={!user?.verified}>

One option to fix the issue

<FormizStep name="pass" isEnabled={!user?.verified || !!form.values.passport}>

Because we don't want to disable the step if there is a value in the passport field.
(it might not be the best way to fix it with real life code. May be you need to store the initial verified status or something else)

I hope this can help you :)

[jcbbb]

@ivan-dalmet Thank you, this worked perfectly 😄