useStepForm - Refine

efficient-indigo · 2024-09-06T03:40:13.821Z

if form submit has backend field errors, it is showing for current step but if back to previous step, error vanished

K

kapa.ai•9/6/24, 3:40 AM

Hi @viveksingh0143. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•9/6/24, 3:40 AM

----------------------
It seems like you're experiencing an issue where backend field errors are not persisting when navigating back to previous steps in a form using . This behavior can be problematic as users might miss important validation messages.

Based on the knowledge sources provided, there isn't a direct solution to this specific issue. However, I can guide you on how to handle form errors in a multi-step form using from .

Here's a basic example of how to set up a multi-step form with error handling:

```tsx
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",
});

K

kapa.ai•9/6/24, 3:40 AM

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>}
</>
);
case 1:
return (
<>
<label>Status: </label>
<select {...register("status")}>
<option value="published">published</option>
<option value="draft">draft</option>
<option value="rejected">rejected</option>
</select>
</>
);
case 2:
return (
<>
<label>Category: </label>
<select
{...register("category.id", {
required: "This field is required",
})}

{options?.map((category) => (
<option key={category.value} value={category.value}>
{category.label}
</option>
))}
</select>
{errors.category && <span>{errors.category.message}</span>}
<br />
<br />
<label>Content: </label>
<textarea
{...register("content", {
required: "This field is required",
})}
rows={10}
cols={50}
/>
{errors.content && <span>{errors.content.message}</span>}
</>
);
}
};

if (formLoading) {
return <div>Loading...</div>;
}

K

kapa.ai•9/6/24, 3:40 AM

return (
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
<div style={{ display: "flex", gap: 36 }}>
{stepTitles.map((title, index) => (
<button
key={index}
onClick={() => gotoStep(index)}
style={{
backgroundColor: currentStep === index ? "lightgray" : "initial",
}}

{index + 1} - {title}
</button>
))}
</div
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•9/6/24, 3:40 AM

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

E

efficient-indigoOP•9/6/24, 3:43 AM

@kapa.ai But i am using useStepForm and Form.Item from @refinedev/antd
How to implement for them

K

kapa.ai•9/6/24, 3:43 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•9/6/24, 3:44 AM

----------------------
To handle backend field errors in a multi-step form using and from

@refinedev/antd

@refinedev/antd

, you need to ensure that errors are managed and displayed correctly across different steps. Here is an example of how you can achieve this:

```tsx
import { Create, useSelect, useStepsForm } from "@refinedev/antd";
import { HttpError } from "@refinedev/core";
import { Button, Form, Input, Select, Steps } from "antd";
import React from "react";

const { Step } = Steps;

export const PostCreate: React.FC = () => {
const { current, gotoStep, stepsProps, formProps, saveButtonProps, query } =
useStepsForm<IPost, HttpError, IPost>();

const { selectProps: categorySelectProps } = useSelect<ICategory, HttpError>({
resource: "categories",
});

const formList = [
<>
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}

<Input />
</Form.Item>
</>,
<>
<Form.Item
label="Category"
name={["category", "id"]}
rules={[
{
required: true,
},
]}

<Select {...categorySelectProps} />
</Form.Item>
</>,
];

K

kapa.ai•9/6/24, 3:44 AM

return (
<Create saveButtonProps={saveButtonProps}>
<Steps {...stepsProps}>
<Step title="About Post" />
<Step title="Content" />
</Steps>
<Form {...formProps} layout="vertical">
{formList[current]}
</Form>
<div style={{ marginTop: 24 }}>
{current > 0 && (
<Button
onClick={() => {
gotoStep(current - 1);
}}

Previous
</Button>
)}
{current < formList.length - 1 && (
<Button
onClick={() => {
gotoStep(current + 1);
}}

Next
</Button>
)}
{current === formList.length - 1 && (
<Button
type="primary"
onClick={() => {
formProps.form?.submit();
}}

Submit
</Button>
)}
</div>
</Create>
);
};

interface ICategory {
id: number;
title: string;
}

interface IPost {
id: number;
title: string;
content: string;
status: "published" | "draft" | "rejected";
category: { id: number };
}
gotoStep` function is used to navigate between steps, and the form errors should persist as long as they are part of the form state. Ensure that your backend error handling logic correctly sets the errors in the form state.

K

kapa.ai•9/6/24, 3:44 AM

For more detailed information, you can refer to the useStepsForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-steps-form/#usage) and the [useSelect documentation](https://refine.dev/docs/ui-integrations/ant-design
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•9/6/24, 3:44 AM

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

E

efficient-indigoOP•9/6/24, 3:53 AM

@kapa.ai yes my backend error handling logic correctly sets, it shows properly on current steps, but when go to previous step, errors don't show, I also checked form state errors are coming properly

K

kapa.ai•9/6/24, 3:53 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•9/6/24, 3:53 AM

----------------------
To ensure that backend errors persist and are displayed correctly when navigating back to previous steps in a multi-step form using and from

@refinedev/antd

@refinedev/antd

, you can manually set the errors in the form state when navigating between steps. Here’s how you can achieve this:

Capture Backend Errors: Ensure that backend errors are captured and stored in a state.
Set Errors Manually: When navigating back to a previous step, manually set the errors for that step.

Here’s an example implementation:

```tsx
import { Create, useSelect, useStepsForm } from "@refinedev/antd";
import { HttpError } from "@refinedev/core";
import { Button, Form, Input, Select, Steps } from "antd";
import React, { useEffect, useState } from "react";

const { Step } = Steps;

export const PostCreate: React.FC = () => {
const { current, gotoStep, stepsProps, formProps, saveButtonProps, query } =
useStepsForm<IPost, HttpError, IPost>();

const { selectProps: categorySelectProps } = useSelect<ICategory, HttpError>({
resource: "categories",
});

const [backendErrors, setBackendErrors] = useState<any>({});

useEffect(() => {
// Set form errors from backend errors when navigating to a step
if (backendErrors[current]) {
formProps.form?.setFields(backendErrors[current]);
}
}, [current, backendErrors, formProps.form]);

const handleBackendErrors = (errors: any) => {
const newBackendErrors = { ...backendErrors };
newBackendErrors[current] = errors;
setBackendErrors(newBackendErrors);
};

K

kapa.ai•9/6/24, 3:53 AM

const formList = [
<>
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}

<Input />
</Form.Item>
</>,
<>
<Form.Item
label="Category"
name={["category", "id"]}
rules={[
{
required: true,
},
]}

<Select {...categorySelectProps} />
</Form.Item>
</>,
];

return (
<Create saveButtonProps={saveButtonProps}>
<Steps {...stepsProps}>
<Step title="About Post" />
<Step title="Content" />
</Steps>
<Form {...formProps} layout="vertical" onFinishFailed={({ errorFields }) => handleBackendErrors(errorFields)}>
{formList[current]}
</Form>
<div style={{ marginTop: 24 }}>
{current > 0 && (
<Button
onClick={() => {
gotoStep(current - 1);
}}

Previous
</Button>
)}
{current < formList.length - 1 && (
<Button
onClick={() => {
gotoStep(current + 1);
}}

Next
</Button>
)}
{current === formList.length - 1 && (
<Button
type="primary"
onClick={() => {
formProps.form?.submit();
}}
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•9/6/24, 3:53 AM

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

E

efficient-indigoOP•9/6/24, 4:31 AM

@kapa.ai onFinishFailed not called

K

kapa.ai•9/6/24, 4:31 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•9/6/24, 4:31 AM

----------------------
If is not being called, you can manually handle backend errors and set them in the form state when navigating between steps. Here’s how you can achieve this:

Capture Backend Errors: Ensure that backend errors are captured and stored in a state.
Set Errors Manually: When navigating back to a previous step, manually set the errors for that step.

Here’s an example implementation:

```tsx
import { Create, useSelect, useStepsForm } from "@refinedev/antd";
import { HttpError } from "@refinedev/core";
import { Button, Form, Input, Select, Steps } from "antd";
import React, { useEffect, useState } from "react";

const { Step } = Steps;

export const PostCreate: React.FC = () => {
const { current, gotoStep, stepsProps, formProps, saveButtonProps, query } =
useStepsForm<IPost, HttpError, IPost>();

const { selectProps: categorySelectProps } = useSelect<ICategory, HttpError>({
resource: "categories",
});

const [backendErrors, setBackendErrors] = useState<any>({});

useEffect(() => {
// Set form errors from backend errors when navigating to a step
if (backendErrors[current]) {
formProps.form?.setFields(backendErrors[current]);
}
}, [current, backendErrors, formProps.form]);

const handleBackendErrors = (errors: any) => {
const newBackendErrors = { ...backendErrors };
newBackendErrors[current] = errors;
setBackendErrors(newBackendErrors);
};

K

kapa.ai•9/6/24, 4:32 AM

const formList = [
<>
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}

<Input />
</Form.Item>
</>,
<>
<Form.Item
label="Category"
name={["category", "id"]}
rules={[
{
required: true,
},
]}

<Select {...categorySelectProps} />
</Form.Item>
</>,
];

return (
<Create saveButtonProps={saveButtonProps}>
<Steps {...stepsProps}>
<Step title="About Post" />
<Step title="Content" />
</Steps>
<Form {...formProps} layout="vertical">
{formList[current]}
</Form>
<div style={{ marginTop: 24 }}>
{current > 0 && (
<Button
onClick={() => {
gotoStep(current - 1);
}}

Previous
</Button>
)}
{current < formList.length - 1 && (
<Button
onClick={() => {
gotoStep(current + 1);
}}

Next
</Button>
)}
{current === formList.length - 1 && (
<Button
type="primary"
onClick={() => {
formProps.form?.submit();
}}

Submit
</Button>
)}
</div>
</Create>
);
};

interface ICategory {
id: number;
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•9/6/24, 4:32 AM

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

E

efficient-indigoOP•9/6/24, 4:33 AM

@kapa.ai Below is the cod, not able to set error for previsous page, no error generate

message.txt8.82KB

K

kapa.ai•9/6/24, 4:33 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•9/6/24, 4:33 AM

----------------------
To ensure that backend errors persist and are displayed correctly when navigating back to previous steps in a multi-step form using and from

@refinedev/antd

@refinedev/antd

, you can manually set the errors in the form state when navigating between steps. Here’s how you can achieve this:

Capture Backend Errors: Ensure that backend errors are captured and stored in a state.
Set Errors Manually: When navigating back to a previous step, manually set the errors for that step.

Here’s an example implementation:

```tsx
import { Create, useSelect, useStepsForm } from "@refinedev/antd";
import { HttpError } from "@refinedev/core";
import { Button, Form, Input, Select, Steps } from "antd";
import React, { useEffect, useState } from "react";

const { Step } = Steps;

export const PostCreate: React.FC = () => {
const { current, gotoStep, stepsProps, formProps, saveButtonProps, query } =
useStepsForm<IPost, HttpError, IPost>();

const { selectProps: categorySelectProps } = useSelect<ICategory, HttpError>({
resource: "categories",
});

const [backendErrors, setBackendErrors] = useState<any>({});

useEffect(() => {
// Set form errors from backend errors when navigating to a step
if (backendErrors[current]) {
formProps.form?.setFields(backendErrors[current]);
}
}, [current, backendErrors, formProps.form]);

const handleBackendErrors = (errors: any) => {
const newBackendErrors = { ...backendErrors };
newBackendErrors[current] = errors;
setBackendErrors(newBackendErrors);
};

K

kapa.ai•9/6/24, 4:33 AM

const formList = [
<>
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}

<Input />
</Form.Item>
</>,
<>
<Form.Item
label="Category"
name={["category", "id"]}
rules={[
{
required: true,
},
]}

<Select {...categorySelectProps} />
</Form.Item>
</>,
];

return (
<Create saveButtonProps={saveButtonProps}>
<Steps {...stepsProps}>
<Step title="About Post" />
<Step title="Content" />
</Steps>
<Form {...formProps} layout="vertical">
{formList[current]}
</Form>
<div style={{ marginTop: 24 }}>
{current > 0 && (
<Button
onClick={() => {
gotoStep(current - 1);
}}

Previous
</Button>
)}
{current < formList.length - 1 && (
<Button
onClick={() => {
gotoStep(current + 1);
}}

Next
</Button>
)}
{current === formList.length - 1 && (
<Button
type="primary"
onClick={() => {
formProps.form?.submit();
}}

Submit
</Button>
)
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•9/6/24, 4:33 AM

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