useForm

useForm is used to manage forms. It is based on useForm from the @mantine/form package and useForm from the @pankod/refine-core package. It supports all the features of these packages and adds some additional features.

Usage

We'll show the basic usage of useForm by adding an editing form.

import { Edit, Select, TextInput, useForm } from "@pankod/refine-mantine";

export const PostEdit: React.FC = () => {
    const { saveButtonProps, getInputProps } = useForm({
        initialValues: {
            title: "",
            status: "",
        },
        validate: {
            title: (value) => (value.length < 2 ? "Too short title" : null),
            status: (value) =>
                value.length <= 0 ? "Status is required" : null,
        },
    });

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <form>
                <TextInput
                    mt={8}
                    label="Title"
                    placeholder="Title"
                    {...getInputProps("title")}
                />
                <Select
                    mt={8}
                    label="Status"
                    placeholder="Pick one"
                    data={[
                        { label: "Published", value: "published" },
                        { label: "Draft", value: "draft" },
                        { label: "Rejected", value: "rejected" },
                    ]}
                    {...getInputProps("status")}
                />
            </form>
        </Edit>
    );
};

In the example if you navigate to /posts/edit/1234 it will manage the data of the post with id of 1234 in an editing context. See Actions on how useForm determines this is an editing context.

Since this is an edit form it will fill the form with the data of the post with id of 1234 and then the form will be ready to edit further and submit the changes.

Submit functionality is provided by saveButtonProps which includes all of the necessary props for a button to submit a form including automatically updating loading states.

API Reference

Properties

It supports all the features of the useForm hook provided by @mantine/form. Also, we added the following return values.

refineCoreProps: You can define all properties provided by useForm here. You can see all of them in here.

For example, we can define the refineCoreProps property in the useForm hook as:

import { useForm } from "@pankod/refine-mantine";

const { ... } = useForm({
    ..., // @mantine/form's useForm props
    refineCoreProps: {
        resource: "posts",
        redirect: false,
        //  @pankod/refine-core's useForm props
    },
});

Return values

Returns all the return values of the useForm hook provided by @mantine/form. Also, we added the following return values.

refineCore: Returns all values returned by useForm. You can see all of them in here.

For example, we can access the refineCore return value in the useForm hook as:

import { useForm } from "@pankod/refine-react-hook-form";

const {
    ..., // @mantine/form's useForm return values
    saveButtonProps,
    refineCore: {
        queryResult,
        ...  // @pankod/refine-core's useForm return values
    },
} = useForm({ ... });

Property	Description	Type
saveButtonProps	Props for a submit button	{ disabled: boolean; onClick: (e: React.FormEvent<HTMLFormElement>) => void; }

Type Parameters

Property	Desription	Type	Default
TData	Result data of the query. Extends BaseRecord	BaseRecord	BaseRecord
TError	Custom error object that extends HttpError	HttpError	HttpError
TVariables	Form values for mutation function	{}	Record<string, unknown>

Live StackBlitz Example