useStepsForm
http://localhost:3000useStepsForm hook allows you to split your form under an Ant Design based Steps component and provides you with a few useful functionalities that will help you manage your form.
Basic Usage
We'll do two examples, one for creating and one for editing a post. Let's see how useStepsForm is used in both.
- create
- edit
Here is the final result of the form: We will explain the code in following sections.
http://localhost:3000Here is the final result of the form: We will explain the code in following sections.
http://localhost:3000For the sake of simplicity, in this example we're going to build a Post "create" form that consists of only a title and a relational category field.
To split your form items under a <Steps> component, first import and use useStepsForm hook in your page:
import React from "react";
import { HttpError } from "@refinedev/core";
import { useStepsForm } from "@refinedev/antd";
export const PostCreate: React.FC = () => {
const {
current,
gotoStep,
stepsProps,
formProps,
saveButtonProps,
queryResult,
} = useStepsForm<IPost, HttpError, IPost>();
return null;
};
interface ICategory {
id: number;
}
interface IPost {
id: number;
title: string;
status: "published" | "draft" | "rejected";
category: {
id: ICategory["id"];
};
}
useStepsForm is generic over the type form data to help you type check your code.
This hook returns a set of useful values to render steps form. Given current value, you should have a way to render your form items conditionally with this index value. You can use an array to achieve this.
Here, each item of formList corresponds to one step in form:
import React from "react";
import { HttpError } from "@refinedev/core";
import { useStepsForm, useSelect } from "@refinedev/antd";
import { Form, Input, Select } from "antd";
export const PostCreate: React.FC = () => {
const { current, gotoStep, stepsProps, formProps, saveButtonProps } =
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>
</>,
];
return null;
};
interface ICategory {
id: number;
title: string;
}
interface IPost {
id: number;
title: string;
content: string;
status: "published" | "draft" | "rejected";
category: { id: number };
}
Since category is a relational data, we use useSelect to fetch its data.
You should use stepsProps on <Steps> component, formProps on the <Form> component respectively. And as the last step, you should render the <Steps> component besides the form like this:
import React from "react";
import { HttpError } from "@refinedev/core";
import {
useStepsForm,
useSelect,
Create,
} from "@refinedev/antd";
import {
Form,
Input,
Select,
Steps,
} from "antd";
export const PostCreate: React.FC = () => {
const {
current,
gotoStep,
stepsProps,
formProps,
saveButtonProps,
queryResult,
} = 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>
</>,
];
return (
<Create saveButtonProps={saveButtonProps}>
<Steps {...stepsProps}>
<Step title="About Post" />
<Step title="Content" />
</Steps>
<Form {...formProps} layout="vertical">
{formList[current]}
</Form>
</Create>
);
};
interface ICategory {
id: number;
title: string;
}
interface IPost {
id: number;
title: string;
content: string;
status: "published" | "draft" | "rejected";
category: { id: number };
}
Make sure to add as much <Steps.Step> components as the number of steps in the formList array.
To help users navigate between steps in the form, you can use action buttons. Your navigation buttons should use the gotoStep function that was previously returned from the the useStepsForm hook.
import React from "react";
import { HttpError } from "@refinedev/core";
import {
useStepsForm,
useSelect,
Create,
SaveButton,
} from "@refinedev/antd";
import { Button, Form, Input, Select, Steps } from "antd";
export const PostCreate: React.FC = () => {
const {
current,
gotoStep,
stepsProps,
formProps,
saveButtonProps,
queryResult,
submit,
} = 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>
</>,
];
return (
<Create
footerButtons={
<>
{current > 0 && (
<Button
onClick={() => {
gotoStep(current - 1);
}}
>
Previous
</Button>
)}
{current < formList.length - 1 && (
<Button
onClick={() => {
gotoStep(current + 1);
}}
>
Next
</Button>
)}
{current === formList.length - 1 && (
<SaveButton
{...saveButtonProps}
style={{ marginRight: 10 }}
onClick={() => submit()}
/>
)}
</>
}
>
<Steps {...stepsProps}>
<Step title="About Post" />
<Step title="Content" />
</Steps>
<Form {...formProps} layout="vertical">
{formList[current]}
</Form>
</Create>
);
};
interface ICategory {
id: number;
title: string;
}
interface IPost {
id: number;
title: string;
content: string;
status: "published" | "draft" | "rejected";
category: { id: number };
}
Properties
defaultCurrent
Default:
0
Sets the default starting step number. Counting starts from 0.
const stepsForm = useStepsForm({
defaultCurrent: 2,
});
total
Maximum number of steps. <Steps> cannot go beyond this number.
const stepsForm = useStepsForm({
total: 3,
});
isBackValidate
Default:
false
When is true, validates a form fields when the user navigates to a previous step.
const stepsForm = useStepsForm({
isBackValidate: true,
});
Return Values
stepsProps
The props needed by the <Steps> component.
current
Current step, counting from 0.
onChange
Callback function that is trigger when the current step of the form changes. The function takes in one argument, currentStep, which is a number representing the index of the current step.
current
Current step, counting from 0.
gotoStep
Is a function that allows you to programmatically change the current step of a form. It takes in one argument, step, which is a number representing the index of the step you want to navigate to.
submit
A function that can submit the form. It's useful when you want to submit the form manually.
defaultFormValuesLoading
When action is "edit" or "clone", useStepsForm will fetch the data from the API and set it as default values. This prop is true when the data is being fetched.
FAQ
How can I change the form data before submitting it to the API?
You may need to modify the form data before it is sent to the API.
For example, Let's send the values we received from the user in two separate inputs, name and surname, to the API as fullName. We can do this by overriding the submit function.
// --
useStepsForm({
submit: (formValues) => {
const data = {
fullName: `${formValues.name} ${formValues.surname}`,
age: formValues.age,
city: formValues.city,
};
onFinish(data as any);
},
});
// --
API Reference
Properties
*: These props have default values inRefineContextand can also be set on <Refine> component.useModalFormwill use what is passed to<Refine>as default but a local value will override it.
**: If not explicitly configured, default value ofredirectdepends on whichactionused. Ifactioniscreate,redirects default value isedit(created resources edit page). ifactioniseditinstead,redirects default value islist.
Type Parameters
| Property | Desription | Type | Default |
|---|---|---|---|
| TData | Result data returned by the query function. Extends BaseRecord | BaseRecord | BaseRecord |
| TError | Custom error object that extends HttpError | HttpError | HttpError |
| TVariables | Values for params. | {} | |
| TSelectData | Result data returned by the select function. Extends BaseRecord. If not specified, the value of TData will be used as the default value. | BaseRecord | TData |
Return Values
| Key | Description | Type |
|---|---|---|
| stepsProps | Ant Design steps props | StepsProps |
| current | Current step, counting from 0. | number |
| gotoStep | Go to the target step | (step: number) => void |
| formProps | Ant Design form props | FormProps |
| form | Ant Design form instance | FormInstance<TVariables> |
| defaultFormValuesLoading | DefaultFormValues loading status of form | boolean |
| submit | Submit method, the parameter is the value of the form fields | () => void |
Example
npm create refine-app@latest -- --example form-antd-use-steps-form