How to come back to specific step and set errors?

[RafaelAndeloci]

Hi, first of all thanks for this well written library, it really helps to manage the form step states 🚀

So, in my use case when we finish the form steps and send the data to an API, the API could return us an array of field errors with a proper error message like:

export type FormError = {
  success: false;
  statusCode: 400;
  error: {
    [key: string]: [
      {
        Code: number;
        Message: string;
      }
    ];
  };
};

my question is, is there an easy way or any good pratices to return to the specific step and use the react-hook-form to set the form error since the form structure with stepperize is written in a composed-like architectury?

[damianricobelli]

Hi! Thank you very much and I'm glad you're enjoying the library.

Regarding your use case, you could use the before/after methods which allow for asynchrony so that you can call your API and then decide whether you want to continue with the next step or go back to a previous one.

And if you need to store that error somewhere in order to work on parent components that contain the react-hook-form hook, then you can make use of the metadata API to store that error and then access it from the step where you need to handle the error.

I think this will solve your problem. If not, send me a codesandbox or reproducible example so I can help you further.

[RafaelAndeloci]

Yeah, I think using the afterGoTo method will be the answer on this one. I will try a little more to find a solution that covers fully my use case and will come back here to share if it works. But anyways thanks for the help and hope your PR on shadcn will be merged! 🚀

[damianricobelli]

Great! If you have any problems, write to me again in this open discussion.

I hope that in the coming weeks the PR will be merged into shadcn! Have a nice day 🎉

[RafaelAndeloci]

Came back a few hours later and kinda find out an way to do it (a little gross right now but it is working)

https://codesandbox.io/p/github/RafaelAndeloci/form-step-example/

[RafaelAndeloci]

oh, you were right, changed it!

[damianricobelli]

Remember that the before/next methods, at the end or before, as the case may be, end up executing a goTo, so you don't need to do a goTo and then an afterGoTo or beforeGoTo.

There are some details you could improve in the code, but it looks good!

[RafaelAndeloci]

I don't know if I get it what you said, but in the use case, the error could be in any step, so I used the goTo and then to assert the error state was set when I get to the step I used the beforeGoTo, but it is doing it only in the submit function, is it wrong?

[damianricobelli]

If the error can be in any step, then the form must first validate the data before moving on to the next step. So, what you need is for your submit of the current step to use beforeNext/beforeGoTo where the step you send as a parameter to that function is the next step or the one you want to pass to it. Then, as the name of the function suggests, you will validate the data BEFORE moving on to the step you want to validate. If this is ok, then you can move on to the next step, otherwise you won't be able to

Same logic if you want to go to previous step

[RafaelAndeloci]

Oh, yes i see, i'm already validating the current step by setting the form resolver to the currentstep.schema so the front-end validation is fine, but the use case main focus is on unexpected field errors that can be returned by the api for example:
i am validating a phone number in the front end with my custom zod validation but then when I send to the api it returns that the field should also respect one more validation that is not expected in the front end validation, so it returns it by an error the format said in the discussion description and then I need to show the user the specific input with the specific error