continuing-cyan•2y ago

Modifying register values in UseModalFormReturnType

Is it possible to modify values that will be registered in custom modal form with type UseModalFormReturnType. I have some separate logic that can't be returned directly from FormControl.

23 Replies

kapa.ai•2y ago

Hi @Tacho. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to modify the values that will be registered in a custom modal form with type UseModalFormReturnType. You can do this by using the transformValues function in the useModalForm hook. This function allows you to modify the form data before it is submitted to the API. Here is an example of how you can do this:

import React from "react";  
import { useModalForm } from "@refinedev/mantine";  
import { TextInput, Modal } from "@mantine/core";  
  
const UserCreate: React.FC = () => {  
 const {  
 getInputProps,  
 saveButtonProps,  
 modal: { show, close, title, visible },  
 } = useModalForm({  
 refineCoreProps: { action: "create" },  
 initialValues: {  
 name: "",  
 surname: "",  
 },  
 transformValues: (values) => ({  
 fullName: `${values.name} ${values.surname}`,  
 }),  
 });  
  
 return (  
 <Modal opened={visible} onClose={close} title={title}>  
 <TextInput  
 mt={8}  
 label="Name"  
 placeholder="Name"  
 {...getInputProps("name")}  
 />  
 <TextInput  
 mt={8}  
 label="Surname"  
 placeholder="Surname"  
 {...getInputProps("surname")}  
 />  
 <Box mt={8} sx={{ display: "flex", justifyContent: "flex-end" }}>  
 <Button  
 {...saveButtonProps}  
 onClick={(e) => {  
 // -- your custom logic  
 saveButtonProps.onClick(e);  
 }}  
 />  
 </Box>  
 </Drawer>  
 );  
};

import React from "react";  
import { useModalForm } from "@refinedev/mantine";  
import { TextInput, Modal } from "@mantine/core";  
  
const UserCreate: React.FC = () => {  
 const {  
 getInputProps,  
 saveButtonProps,  
 modal: { show, close, title, visible },  
 } = useModalForm({  
 refineCoreProps: { action: "create" },  
 initialValues: {  
 name: "",  
 surname: "",  
 },  
 transformValues: (values) => ({  
 fullName: `${values.name} ${values.surname}`,  
 }),  
 });  
  
 return (  
 <Modal opened={visible} onClose={close} title={title}>  
 <TextInput  
 mt={8}  
 label="Name"  
 placeholder="Name"  
 {...getInputProps("name")}  
 />  
 <TextInput  
 mt={8}  
 label="Surname"  
 placeholder="Surname"  
 {...getInputProps("surname")}  
 />  
 <Box mt={8} sx={{ display: "flex", justifyContent: "flex-end" }}>  
 <Button  
 {...saveButtonProps}  
 onClick={(e) => {  
 // -- your custom logic  
 saveButtonProps.onClick(e);  
 }}  
 />  
 </Box>  
 </Drawer>  
 );  
};

In this example, the transformValues function is used to combine the name and surname values into a single fullName value before it is submitted to the API. You can replace the transformValues function with your own logic to modify the form data as needed. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

continuing-cyanOP•2y ago

@kapa.ai Is it possible to pass additional values on onFinish or handleSubmit?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, it is possible to pass additional values on onFinish or handleSubmit. The onFinish hook in Refine allows you to override the save button's default configuration and define what’s sent to the server. The hook accepts an object with properties of each record on the API, to which you can pass custom values. Here is an example of how you can use the onFinish hook:

onFinish({  
 firstName: "",  
 email: "",  
 skills: "",  
});

onFinish({  
 firstName: "",  
 email: "",  
 skills: "",  
});

To use this hook, first, destructure it and the handleSubmit hook from useForm.

const {  
 refineCore: { onFinish },  
 control,  
 formState: { errors },  
 handleSubmit,  
} = useForm<IPost>({  
 mode: "onChange",  
 defaultValues,  
});

const {  
 refineCore: { onFinish },  
 control,  
 formState: { errors },  
 handleSubmit,  
} = useForm<IPost>({  
 mode: "onChange",  
 defaultValues,  
});

In the onFinish function, you can pass an object with the properties of each record on the API. You can add additional properties to this object as needed. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-form#onfinish). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

continuing-cyanOP•2y ago

@kapa.ai How would I include all values from fields end extend onFinish with additional values from my logic?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can include all values from fields and extend onFinish with additional values from your logic by defining a custom onFinish function. This function will receive the form values as its argument, which you can then modify as needed before submitting. Here's an example of how you can do this:

const { onFinish, ... } = useForm({
    // other options...
    onFinish: (values) => {
        // Modify values here...
        const extendedValues = {
            ...values,
            // Add your additional values here...
            additionalValue1: 'some value',
            additionalValue2: 'some other value',
        };

        // Call the appropriate mutation with the extended values
        // This will depend on your specific setup
        myMutationFunction(extendedValues);
    },
});

const { onFinish, ... } = useForm({
    // other options...
    onFinish: (values) => {
        // Modify values here...
        const extendedValues = {
            ...values,
            // Add your additional values here...
            additionalValue1: 'some value',
            additionalValue2: 'some other value',
        };

        // Call the appropriate mutation with the extended values
        // This will depend on your specific setup
        myMutationFunction(extendedValues);
    },
});

In this example, values is an object containing all the form values. You can spread this object into a new object to include all the original form values, and then add your additional values to this new object. Please note that you'll need to replace myMutationFunction with the actual function you're using to submit the form data. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#onfinish-2). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

continuing-cyanOP•2y ago

@kapa.ai And how would I do it inside modal?

export const CreateOrder: React.FC<
    UseModalFormReturnType<IOrder, HttpError>
    > = ({
        register,
        control,
        formState: { errors },
        refineCore: { onFinish },
        handleSubmit,
        modal: { visible, close },
        saveButtonProps,
    }) => {

export const CreateOrder: React.FC<
    UseModalFormReturnType<IOrder, HttpError>
    > = ({
        register,
        control,
        formState: { errors },
        refineCore: { onFinish },
        handleSubmit,
        modal: { visible, close },
        saveButtonProps,
    }) => {

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can modify the form values before submitting them in a modal by defining a custom onFinish function inside your CreateOrder component. This function will receive the form values as its argument, which you can then modify as needed before submitting. Here's an example of how you can do this:

export const CreateOrder: React.FC<
    UseModalFormReturnType<IOrder, HttpError>
> = ({
    register,
    control,
    formState: { errors },
    refineCore: { onFinish },
    handleSubmit,
    modal: { visible, close },
    saveButtonProps,
}) => {
    const handleOnFinish = (values) => {
        // Modify values here...
        const extendedValues = {
            ...values,
            // Add your additional values here...
            additionalValue1: 'some value',
            additionalValue2: 'some other value',
        };

        // Call the original onFinish function with the extended values
        onFinish(extendedValues);
    };

    return (
        <Modal visible={visible} onClose={close}>
            <Form onFinish={handleOnFinish} onSubmitCapture={handleSubmit}>
                {/* form fields... */}
            </Form>
        </Modal>
    );
};

export const CreateOrder: React.FC<
    UseModalFormReturnType<IOrder, HttpError>
> = ({
    register,
    control,
    formState: { errors },
    refineCore: { onFinish },
    handleSubmit,
    modal: { visible, close },
    saveButtonProps,
}) => {
    const handleOnFinish = (values) => {
        // Modify values here...
        const extendedValues = {
            ...values,
            // Add your additional values here...
            additionalValue1: 'some value',
            additionalValue2: 'some other value',
        };

        // Call the original onFinish function with the extended values
        onFinish(extendedValues);
    };

    return (
        <Modal visible={visible} onClose={close}>
            <Form onFinish={handleOnFinish} onSubmitCapture={handleSubmit}>
                {/* form fields... */}
            </Form>
        </Modal>
    );
};

In this example, values is an object containing all the form values. You can spread this object into a new object to include all the original form values, and then add your additional values to this new object. The onFinish function is then called with the extended values when the form is submitted. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

continuing-cyanOP•2y ago

@kapa.ai Could I modify it inside of handleSubmit instead of onFinish?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can modify the form data inside of handleSubmit instead of onFinish. The handleSubmit function from react-hook-form takes an onSubmit callback function as its argument, which is called with the form data when the form is submitted. Here's an example of how you can do this:

export const CreateOrder: React.FC<
    UseModalFormReturnType<IOrder, HttpError>
> = ({{
    register,
    control,
    formState: {{ errors }},
    refineCore: {{ onFinish }},
    handleSubmit,
    modal: {{ visible, close }},
    saveButtonProps,
}}) => {{
    const onSubmit = (values) => {{
        // Modify values here...
        const extendedValues = {{
            ...values,
            // Add your additional values here...
            additionalValue1: 'some value',
            additionalValue2: 'some other value',
        }};

        // Call the original onFinish function with the extended values
        onFinish(extendedValues);
    }};

    return (
        <Modal visible={{visible}} onClose={{close}}>
            <Form onSubmit={{handleSubmit(onSubmit)}}>
                {{/* form fields... */}}
            </Form>
        </Modal>
    );
}};

export const CreateOrder: React.FC<
    UseModalFormReturnType<IOrder, HttpError>
> = ({{
    register,
    control,
    formState: {{ errors }},
    refineCore: {{ onFinish }},
    handleSubmit,
    modal: {{ visible, close }},
    saveButtonProps,
}}) => {{
    const onSubmit = (values) => {{
        // Modify values here...
        const extendedValues = {{
            ...values,
            // Add your additional values here...
            additionalValue1: 'some value',
            additionalValue2: 'some other value',
        }};

        // Call the original onFinish function with the extended values
        onFinish(extendedValues);
    }};

    return (
        <Modal visible={{visible}} onClose={{close}}>
            <Form onSubmit={{handleSubmit(onSubmit)}}>
                {{/* form fields... */}}
            </Form>
        </Modal>
    );
}};

In this example, handleSubmit is called with the onSubmit function, which modifies the form values before calling onFinish. For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/react-hook-form/use-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

continuing-cyanOP•2y ago

@kapa.ai Can I call my custom onSubmit at Create SaveButton props and how?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can call your custom onSubmit function at the Create component's SaveButton props. You can do this by defining a custom onClick handler for the SaveButton that calls handleSubmit with your onSubmit function. Here's an example of how you can do this:

export const CreateOrder: React.FC<
    UseModalFormReturnType<IOrder, HttpError>
> = ({{
    register,
    control,
    formState: {{ errors }},
    refineCore: {{ onFinish }},
    handleSubmit,
    modal: {{ visible, close }},
    saveButtonProps,
}}) => {{
    const onSubmit = (values) => {{
        // Modify values here...
        const extendedValues = {{
            ...values,
            // Add your additional values here...
            additionalValue1: 'some value',
            additionalValue2: 'some other value',
        }};

        // Call the original onFinish function with the extended values
        onFinish(extendedValues);
    }};

    return (
        <Modal visible={{visible}} onClose={{close}}>
            <Form>
                {{/* form fields... */}}
                <Button
                    {{...saveButtonProps}}
                    onClick={{(e) => {{
                        handleSubmit(onSubmit)(e);
                    }}}
                >
                    Save
                </Button>
            </Form>
        </Modal>
    );
}};

export const CreateOrder: React.FC<
    UseModalFormReturnType<IOrder, HttpError>
> = ({{
    register,
    control,
    formState: {{ errors }},
    refineCore: {{ onFinish }},
    handleSubmit,
    modal: {{ visible, close }},
    saveButtonProps,
}}) => {{
    const onSubmit = (values) => {{
        // Modify values here...
        const extendedValues = {{
            ...values,
            // Add your additional values here...
            additionalValue1: 'some value',
            additionalValue2: 'some other value',
        }};

        // Call the original onFinish function with the extended values
        onFinish(extendedValues);
    }};

    return (
        <Modal visible={{visible}} onClose={{close}}>
            <Form>
                {{/* form fields... */}}
                <Button
                    {{...saveButtonProps}}
                    onClick={{(e) => {{
                        handleSubmit(onSubmit)(e);
                    }}}
                >
                    Save
                </Button>
            </Form>
        </Modal>
    );
}};

In this example, handleSubmit is called with the onSubmit function inside the onClick handler for the SaveButton. This will modify the form values before they are submitted when the SaveButton is clicked. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/create#savebuttonprops). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

continuing-cyanOP•2y ago

@kapa.ai I tried it like this but it doesn't work, can you help?

            <Create
                saveButtonProps={{
                    ...saveButtonProps,
                    onClick: () => {
                        handleSubmit(extendedOnFinish);
                    }
                }}

            <Create
                saveButtonProps={{
                    ...saveButtonProps,
                    onClick: () => {
                        handleSubmit(extendedOnFinish);
                    }
                }}

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: Sorry @Tacho, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

continuing-cyanOP•2y ago

@kapa.ai I tried it like this but it doesn't work, can you help?

<Create
                saveButtonProps={{
                    ...saveButtonProps,
                    onClick: () => {
                        handleSubmit(extendedOnFinish);
                    }
                }}

<Create
                saveButtonProps={{
                    ...saveButtonProps,
                    onClick: () => {
                        handleSubmit(extendedOnFinish);
                    }
                }}

kapa.ai•2y ago

continuing-cyanOP•2y ago

@kapa.ai I tried it like this but it doesn't work, can you help?

<Create
saveButtonProps={{
    ...saveButtonProps,
    onClick: () => {
        handleSubmit(extendedOnFinish);
    }
}}

<Create
saveButtonProps={{
    ...saveButtonProps,
    onClick: () => {
        handleSubmit(extendedOnFinish);
    }
}}

kapa.ai•2y ago

Modifying register values in UseModalFormReturnType

Did you find this page helpful?