ambitious-aqua•14mo ago

Change values before sending to server

Hello, I was wondering if it was possible to change the values of formProps?.data?.data before sending them to the server (i.e. I want to add/remove/modify information when I click on the save button) to send them correctly to the server.

export default function SessionsEdit(): ReactElement | null {

    // Variables

    const { id } = useParams();

    // Initiate the form
    const {formProps, saveButtonProps, formLoading: loadingForm, queryResult: dataSession } = useForm<ISession>({
        dataProviderName: PROVIDERS.LEARNING_LAB,
        resource: "session",
        id: id,

    });

    // Initiate the select with clients
    const { data: queryClients, isLoading: loadingClients } = useList<IClient>({
        dataProviderName: PROVIDERS.LEARNING_LAB,
        resource: "clients",
    })

    // Initiate the select with clients
    const { data: queryAuthentications, isLoading: loadingAuths } = useList<IAuthentication>({
        dataProviderName: PROVIDERS.LEARNING_LAB,
        resource: "authentications",
    })

    const clients: IClient[] = queryClients?.data ?? []
    const authentications: IAuthentication[] = queryAuthentications?.data ?? []

    // Functions

return (
        <Edit isLoading={loadingForm} saveButtonProps={saveButtonProps}>
            <Form layout="vertical" {...formProps}>
                <GenerateFormItem label="Titre" name="title" icon="ant-design:notification-outlined">
                    <Input/>
                </GenerateFormItem>
            </Form>
        </Edit>
    )
}

export default function SessionsEdit(): ReactElement | null {

    // Variables

    const { id } = useParams();

    // Initiate the form
    const {formProps, saveButtonProps, formLoading: loadingForm, queryResult: dataSession } = useForm<ISession>({
        dataProviderName: PROVIDERS.LEARNING_LAB,
        resource: "session",
        id: id,

    });

    // Initiate the select with clients
    const { data: queryClients, isLoading: loadingClients } = useList<IClient>({
        dataProviderName: PROVIDERS.LEARNING_LAB,
        resource: "clients",
    })

    // Initiate the select with clients
    const { data: queryAuthentications, isLoading: loadingAuths } = useList<IAuthentication>({
        dataProviderName: PROVIDERS.LEARNING_LAB,
        resource: "authentications",
    })

    const clients: IClient[] = queryClients?.data ?? []
    const authentications: IAuthentication[] = queryAuthentications?.data ?? []

    // Functions

return (
        <Edit isLoading={loadingForm} saveButtonProps={saveButtonProps}>
            <Form layout="vertical" {...formProps}>
                <GenerateFormItem label="Titre" name="title" icon="ant-design:notification-outlined">
                    <Input/>
                </GenerateFormItem>
            </Form>
        </Edit>
    )
}

2 Replies

kapa.ai•14mo ago

Hi @realdragonma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can change the form data before submitting it to the API by modifying the onFinish function in the formProps. You can create a custom handleOnFinish function to modify the form data and then call the original onFinish function from formProps. Here's an example of how you can modify the form data before submitting it:

export default function SessionsEdit(): ReactElement | null {
    // ... (your existing code)

    const handleOnFinish = (values) => {
        // Modify the form data here
        const modifiedValues = {
            ...values,
            // Add, remove, or modify properties as needed
        };

        // Call the original onFinish function with the modified values
        formProps.onFinish && formProps.onFinish(modifiedValues);
    };

    return (
        <Edit isLoading={loadingForm} saveButtonProps={saveButtonProps}>
            <Form layout="vertical" {...formProps} onFinish={handleOnFinish}>
                <GenerateFormItem label="Titre" name="title" icon="ant-design:notification-outlined">
                    <Input />
                </GenerateFormItem>
            </Form>
        </Edit>
    );
}

export default function SessionsEdit(): ReactElement | null {
    // ... (your existing code)

    const handleOnFinish = (values) => {
        // Modify the form data here
        const modifiedValues = {
            ...values,
            // Add, remove, or modify properties as needed
        };

        // Call the original onFinish function with the modified values
        formProps.onFinish && formProps.onFinish(modifiedValues);
    };

    return (
        <Edit isLoading={loadingForm} saveButtonProps={saveButtonProps}>
            <Form layout="vertical" {...formProps} onFinish={handleOnFinish}>
                <GenerateFormItem label="Titre" name="title" icon="ant-design:notification-outlined">
                    <Input />
                </GenerateFormItem>
            </Form>
        </Edit>
    );
}

In this example, the handleOnFinish function is called when the form is submitted. You can modify the values object as needed before calling the original onFinish function from formProps with the modified values. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @realdragonma, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?

harsh-harlequin•14mo ago

you can use this https://refine.dev/docs/faq/#how-can-i-change-the-form-data-before-submitting-it-to-the-api

FAQ | refine

How can I change the form data before submitting it to the API?