useStepForm from react-form-hooks doesn't work as expected
When using useStepsForm<BaseRecord, HttpError, MyFields> and going to the next step, the gotoStep fails, as it fails the validation for the fields in the non active steps (like in the next step).
For example lets say I have this:
For example lets say I have this:
const form = useStepsForm<BaseRecord, HttpError, CreatePropertyFields>({
resolver: zodResolver(createFormScheme),
});
const {
refineCore: {onFinish, formLoading},
register,
handleSubmit,
formState: {errors},
steps: {currentStep, gotoStep},
} = form;
const t = useTranslate()
const renderFormByStep = (step: number) => {
switch(step) {
case 0:
return (
<FormField
control={form.control}
name="title"
render={({field}) => (
<FormItem>
<FormLabel withAsterisk>Title</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage/>
</FormItem>)}
/>
);
case 1:
return (
<FormField
control={form.control}
name="test"
render={({field}) => (
<FormItem>
<FormLabel withAsterisk>Test</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage/>
</FormItem>)}
/>
);
}
}; const form = useStepsForm<BaseRecord, HttpError, CreatePropertyFields>({
resolver: zodResolver(createFormScheme),
});
const {
refineCore: {onFinish, formLoading},
register,
handleSubmit,
formState: {errors},
steps: {currentStep, gotoStep},
} = form;
const t = useTranslate()
const renderFormByStep = (step: number) => {
switch(step) {
case 0:
return (
<FormField
control={form.control}
name="title"
render={({field}) => (
<FormItem>
<FormLabel withAsterisk>Title</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage/>
</FormItem>)}
/>
);
case 1:
return (
<FormField
control={form.control}
name="test"
render={({field}) => (
<FormItem>
<FormLabel withAsterisk>Test</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage/>
</FormItem>)}
/>
);
}
};
