adverse-sapphire•6mo ago

useStepsForm

Hi, how can I use useStepsForm, with custom input fields without register, if some of the data I need I get from useState?

7 Replies

kapa.ai•6mo ago

Hi @RomaY. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- useStepsForm is a hook provided by Refine that allows you to manage a form with multiple steps. It provides features such as which step is currently active, the ability to go to a specific step, and validation when changing steps. However, the information provided in the extracts does not include details on how to use useStepsForm with custom input fields without register, or how to use it with data from useState. The examples provided use the register function from useStepsForm to register input fields. Here is an example of how useStepsForm is used with register:

const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 steps: { currentStep, gotoStep },  
} = useStepsForm<IPost, HttpError, IPost>();  

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
 }  
};

const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 steps: { currentStep, gotoStep },  
} = useStepsForm<IPost, HttpError, IPost>();  

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, register is used to register the input fields in the form. If you want to use custom input fields without register, or use data from useState, you may need to look into the documentation or examples of useStepsForm for more information. Here are some useful links for further reading: - useStepsForm Documentation (https://refine.dev/docs/packages/react-hook-form/use-steps-form) - useStepsForm Example (https://github.com/refinedev/refine/tree/master/examples/form-react-hook-form-use-steps-form) Please note that these links are based on the information provided in the extracts. For the most accurate and up-to-date information, please refer to the official Refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

adverse-sapphire•6mo ago

Ok, then, can I set value to register without Input? @kapa.ai

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @RomaY, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

adverse-sapphire•6mo ago

How can I use register with antd Autocomplete, where I enter text and get an array of objects, and when I select one of them, I need to take a certain field from it and put this value in register? @contributor I used to useState and just pass this value to onFinish(), but for steps I need "register" @kapa.ai

kapa.ai•6mo ago

adverse-sapphire•6mo ago

So, I just used register with setValues in useEffect, and it works normally