useStepsForm
The useStepsForm
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 will show two examples, one for creating a post and one for editing it. 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.
Here is the final result of the form: We will explain the code in following sections.
For 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 { useStepsForm } from "@refinedev/antd";
import { HttpError } from "@refinedev/core";
import React from "react";
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 a 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 { useSelect, useStepsForm } from "@refinedev/antd";
import { HttpError } from "@refinedev/core";
import { Form, Input, Select } from "antd";
import React from "react";
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. And as the last step, you should render the <Steps>
component besides the form like this:
import { Create, useSelect, useStepsForm } from "@refinedev/antd";
import { HttpError } from "@refinedev/core";
import {
Form,
Input,
Select,
Steps,
} from "antd";
import React from "react";
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 the action buttons. Your navigation buttons should use the gotoStep
function that was previously returned from the the useStepsForm
hook.
import {
Create,
SaveButton,
useSelect,
useStepsForm,
} from "@refinedev/antd";
import { HttpError } from "@refinedev/core";
import { Button, Form, Input, Select, Steps } from "antd";
import React from "react";
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
All of the useForm
props are also available in useStepsForm
. You can find descriptions on useForm
documentation.
defaultCurrent
defaultCurrent
sets the default starting step number. Counting starts from 0
.
const stepsForm = useStepsForm({
defaultCurrent: 2,
});
total
total
is the maximum number of steps. <Steps>
cannot go beyond this number.
const stepsForm = useStepsForm({
total: 3,
});
isBackValidate
When isBackValidate
is true
, it validates a form fields when the user navigates to a previous step. It is false
by default.
const stepsForm = useStepsForm({
isBackValidate: true,
});
overtimeOptions
If you want loading overtime for the request, you can pass the overtimeOptions
prop to the this hook. It is useful when you want to show a loading indicator when the request takes too long.
interval
is the time interval in milliseconds. onInterval
is the function that will be called on each interval.
Return the overtime
object from this hook. elapsedTime
is the elapsed time in milliseconds. It becomes undefined
when the request is completed.
const { overtime } = useStepsForm({
//...
overtimeOptions: {
interval: 1000,
onInterval(elapsedInterval) {
console.log(elapsedInterval);
},
},
});
console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...
// You can use it like this:
{
elapsedTime >= 4000 && <div>this takes a bit longer than expected</div>;
}
autoSave
If you want to save the form automatically after some delay when user edits the form, you can pass true to autoSave.enabled
prop.
By default the autoSave
feature does not invalidate queries. However, you can use the invalidateOnUnmount
prop to invalidate queries upon unmount.
It also supports onMutationSuccess
and onMutationError
callback functions. You can use isAutoSave
parameter to determine whether the mutation is triggered by autoSave
or not.
autoSave
feature operates exclusively in edit
mode. Users can take advantage of this feature while editing data, as changes are automatically saved in editing mode. However, when creating new data, manual saving is still required.
onMutationSuccess
and onMutationError
callbacks will be called after the mutation is successful or failed.
enabled
Default:
false
To enable the autoSave
feature, set the enabled
parameter to true
.
useStepsForm({
autoSave: {
enabled: true,
},
});
debounce
Default:
1000
Set the debounce time for the autoSave
prop.
useStepsForm({
autoSave: {
enabled: true,
debounce: 2000,
},
});
onFinish
If you want to modify the data before sending it to the server, you can use onFinish
callback function.
useStepsForm({
autoSave: {
enabled: true,
onFinish: (values) => {
return {
foo: "bar",
...values,
};
},
},
});
invalidateOnUnmount
Default:
false
This prop is useful when you want to invalidate the list
, many
and detail
queries from the current resource when the hook is unmounted. By default, it invalidates the list
, many
and detail
queries associated with the current resource. Also, You can use the invalidates
prop to select which queries to invalidate.
useStepsForm({
autoSave: {
enabled: true,
invalidateOnUnmount: true,
},
});
Return Values
stepsProps
stepsProps
is the props needed by the <Steps>
component.
current
current
is the current step, counting from 0
.
onChange
Callback function that is triggered 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
The Current step, counting from 0
.
gotoStep
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
submit
is 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.
overtime
overtime
object is returned from this hook. elapsedTime
is the elapsed time in milliseconds. It becomes undefined
when the request is completed.
const { overtime } = useStepsForm();
console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...
autoSaveProps
If autoSave
is enabled, this hook returns autoSaveProps
object with data
, error
, and status
properties from mutation.
FAQ
How can I change the form data before submitting it to the API?
Here is an example where we modify the form data before submit:
We need to 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.
import { useStepsForm } from "@refinedev/antd";
// ...
const { current, gotoStep, stepsProps, formProps, saveButtonProps, onFinish } =
useStepsForm<IPost>({
submit: (values) => {
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 inRefineContext
and can also be set on <Refine> component.useModalForm
will use what is passed to<Refine>
as default but a local value will override it.
**
: If not explicitly configured, default value ofredirect
depends on whichaction
used. Ifaction
iscreate
,redirect
s default value isedit
(created resources edit page). ifaction
isedit
instead,redirect
s default value islist
.
Type Parameters
Property | Desription | Type | Default |
---|---|---|---|
TQueryFnData | Result data returned by the query function. Extends BaseRecord | BaseRecord | BaseRecord |
TError | Custom error object that extends HttpError | HttpError | HttpError |
TVariables | Values for params. | {} | |
TData | Result data returned by the select function. Extends BaseRecord . If not specified, the value of TQueryFnData will be used as the default value. | BaseRecord | TQueryFnData |
TResponse | Result data returned by the mutation function. Extends BaseRecord . If not specified, the value of TData will be used as the default value. | BaseRecord | TData |
TResponseError | Custom error object that extends HttpError . If not specified, the value of TError will be used as the default value. | HttpError | TError |
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 |
overtime | Overtime loading props | { elapsedTime?: number } |
autoSaveProps | Auto save props | { data: UpdateResponse<TData> | undefined, error: HttpError | null, status: "loading" | "error" | "idle" | "success" } |
Example
npm create refine-app@latest -- --example form-antd-use-steps-form
- Basic Usage
- Properties
defaultCurrent
total
isBackValidate
overtimeOptions
autoSave
enabled
debounce
onFinish
invalidateOnUnmount
- Return Values
stepsProps
current
onChange
current
gotoStep
submit
defaultFormValuesLoading
overtime
autoSaveProps
- FAQ
- How can I change the form data before submitting it to the API?
- API Reference
- Properties
- Type Parameters
- Return Values
- Example