rival-black•14mo ago

Uncaught runtime error in Ant Design useStepsForm example

I was testing this example https://codesandbox.io/embed/github/refinedev/refine/tree/next/examples/form-antd-use-steps-form and I am getting "Uncaught runtime errors: ERROR [object Object]..." when trying to go to the next step with errors in the form (leaving fields empty). This is the first time I try something in react so I am not sure how to find the cause of the error or fix it, and the error is not giving much information. The error also happens on the codesandbox example. Any ideas on how to fix it?

form-antd-use-steps-form - CodeSandbox

form-antd-use-steps-form using @refinedev/antd, @refinedev/cli, @refinedev/core, @refinedev/react-router-v6, @refinedev/simple-rest, @types/node, @types/react, @types/react-dom, @uiw/react-md-editor

2 Replies

kapa.ai•14mo ago

Hi @wkcz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, based on the information provided, it seems like you're encountering an error when trying to navigate to the next step in a form using the useStepsForm hook from refine, especially when there are errors in the form (like leaving fields empty). The useStepsForm hook is a method that allows you to split your form into multiple sections using an Ant Design Steps component. It provides functionalities to manage your form, including handling form errors. If a field is required and left empty, it should display an error message instead of causing a runtime error. Here's a basic usage of useStepsForm hook from the documentation:

import { HttpError, useSelect } from "@refinedev/core";  
import { useStepsForm } from "@refinedev/react-hook-form";  
  
const PostCreate = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 steps: { currentStep, gotoStep },  
 } = useStepsForm<IPost, HttpError, IPost>();  
  
 const { options } = useSelect<ICategory, HttpError>({  
 resource: "categories",  
 });  
  
 const renderFormByStep = (step: number) => {  
 switch (step) {  
 case 0:  
 return (  
 <>  
 <label>Title: </label>  
 <input  
 {...register("title", {  
 required: "This field is required",  
 })}  
 />  
 {errors.title && <span>{errors.title.message}</span>}  
 </>  
 );  
 // ... other cases
 }
}

import { HttpError, useSelect } from "@refinedev/core";  
import { useStepsForm } from "@refinedev/react-hook-form";  
  
const PostCreate = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 steps: { currentStep, gotoStep },  
 } = useStepsForm<IPost, HttpError, IPost>();  
  
 const { options } = useSelect<ICategory, HttpError>({  
 resource: "categories",  
 });  
  
 const renderFormByStep = (step: number) => {  
 switch (step) {  
 case 0:  
 return (  
 <>  
 <label>Title: </label>  
 <input  
 {...register("title", {  
 required: "This field is required",  
 })}  
 />  
 {errors.title && <span>{errors.title.message}</span>}  
 </>  
 );  
 // ... other cases
 }
}

In this example, if the "title" field is left empty, it will display an error message "This field is required". If you're still encountering issues, I recommend checking the refine documentation (https://refine.dev/docs) or the useStepsForm hook documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useStepsForm/) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@844050282119168050> kapa.ai is still learning and improving, please let us how it did by reacting below