flat-fuchsia
flat-fuchsia12mo 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
kapa.ai12mo 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?
continuing-cyan
continuing-cyan12mo ago
FAQ | refine
How can I change the form data before submitting it to the API?