Modifying data on an edit page before updating

I have a field where the user enters a phone number that's formatted into an object using "antd-phone-input" as a dep. Registering a user and entering the phone number works no problem, but how can I update the phone number on the edit page?
import PhoneInput from 'antd-phone-input';
import { formatPhoneNumber } from '../../utility/formatPhone';

return (
<CanAccess fallback={<NoPermission />}>
<Edit saveButtonProps={saveButtonProps} title={`Edit ${postData?.full_name}`}>
<Form {...formProps} layout='vertical' onFinish={handleOnFinish}>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col span={8}>
<Form.Item
label='Full name'
name='full_name'
rules={[
{
required: true,
},
]}
>
<Input disabled={role === 'user'} />
</Form.Item>
</Col>

<Col span={8}>
<Form.Item
label='Email address'
name='email'
rules={[
{
required: true,
},
]}
>
<Input disabled={role === 'user'} />
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label='Phone' name='phone' rules={[{ validator }]}>
<PhoneInput enableSearch={false} disableDropdown />
</Form.Item>
</Col>

{
// Other fields...
}
</Row>
</Form>
</Edit>
</CanAccess>
);
};
import PhoneInput from 'antd-phone-input';
import { formatPhoneNumber } from '../../utility/formatPhone';

return (
<CanAccess fallback={<NoPermission />}>
<Edit saveButtonProps={saveButtonProps} title={`Edit ${postData?.full_name}`}>
<Form {...formProps} layout='vertical' onFinish={handleOnFinish}>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col span={8}>
<Form.Item
label='Full name'
name='full_name'
rules={[
{
required: true,
},
]}
>
<Input disabled={role === 'user'} />
</Form.Item>
</Col>

<Col span={8}>
<Form.Item
label='Email address'
name='email'
rules={[
{
required: true,
},
]}
>
<Input disabled={role === 'user'} />
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label='Phone' name='phone' rules={[{ validator }]}>
<PhoneInput enableSearch={false} disableDropdown />
</Form.Item>
</Col>

{
// Other fields...
}
</Row>
</Form>
</Edit>
</CanAccess>
);
};
kapa.ai
kapa.ai74d ago
Hi @James. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To modify the phone number data before updating, you can use the onFinish function from the useForm hook provided by Refine. This function is called when the form is submitted successfully, and it receives the form values as its argument. You can modify these values before they are sent to the API. Here's how you can do it:
const { formProps, saveButtonProps, onFinish } = useForm({
// other useForm options...
});

const handleOnFinish = (values) => {
// Modify the phone number data here
const formattedPhoneNumber = formatPhoneNumber(values.phone);
onFinish({
...values,
phone: formattedPhoneNumber,
});
};

return (
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} onFinish={handleOnFinish} layout="vertical">
{/* form fields... */}
</Form>
</Edit>
);
const { formProps, saveButtonProps, onFinish } = useForm({
// other useForm options...
});

const handleOnFinish = (values) => {
// Modify the phone number data here
const formattedPhoneNumber = formatPhoneNumber(values.phone);
onFinish({
...values,
phone: formattedPhoneNumber,
});
};

return (
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} onFinish={handleOnFinish} layout="vertical">
{/* form fields... */}
</Form>
</Edit>
);
In this example, formatPhoneNumber is a hypothetical function that formats the phone number data as needed. Replace it with your actual formatting function. Please note that this is a general approach and might need adjustments based on your actual use case and data structure. For more information, you can refer to the Refine documentation on how to change the form data before submitting it to the API (https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#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
kapa.ai74d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
equal-aqua
equal-aqua74d ago
@kapa.ai Clicking the save button doesn't do anything.
kapa.ai
kapa.ai74d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- If clicking the save button doesn't do anything, it could be due to several reasons. Here are a few things you can check: 1. Check if saveButtonProps is passed to the SaveButton component: The SaveButton component uses the saveButtonProps returned by the useForm hook. This includes submitting the form action, button loading, and disable states. Make sure you're passing saveButtonProps to the SaveButton component correctly. 2. Check if onFinish function is defined and passed to the form: The onFinish function is called when the form is submitted successfully. Make sure you have defined this function and passed it to the form's onFinish prop. 3. Check if there are any validation errors: If there are validation errors in your form, the form won't be submitted. Make sure all form fields are filled correctly and there are no validation errors. 4. Check if there's an issue with the useForm hook: The useForm hook is responsible for handling form submission. If there's an issue with this hook, the form won't be submitted. You can check the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/) for more information on how to use this hook. 5. Check for any reported bugs: There might be a bug causing this issue. You can check the Refine GitHub issues (https://github.com/refinedev/refine/issues) to see if there's a reported bug related to the save button. If none of the above solutions work, you might need to debug your code to find the issue. If you're still having trouble, consider asking for help on the Refine Discord server (https://discord.com/channels/837692625737613362/950759862114074674) or creating a new issue on the Refine GitHub repository (https://github.com/refinedev/refine/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai74d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
equal-aqua
equal-aqua74d ago
@kapa.ai I get the following error: phoneNumber.replace is not a function
kapa.ai
kapa.ai74d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The error message "phoneNumber.replace is not a function" suggests that the phoneNumber variable you're trying to call the replace method on is not a string. The replace method is a built-in JavaScript method for string data type. In your case, it seems like phoneNumber might not be a string. It could be null, undefined, a number, an object, etc. To fix this issue, you need to ensure that phoneNumber is a string before calling the replace method on it. You can do this by adding a check before calling replace:
if (typeof phoneNumber === 'string') {
const formattedPhoneNumber = phoneNumber.replace(/* your replace logic here */);
// rest of your code...
}
if (typeof phoneNumber === 'string') {
const formattedPhoneNumber = phoneNumber.replace(/* your replace logic here */);
// rest of your code...
}
This will ensure that replace is only called when phoneNumber is a string. If phoneNumber is not supposed to be a string, then you might be calling replace incorrectly. In that case, you need to revise your code to correctly handle the phoneNumber data. For more information, you can refer to the JavaScript replace() method documentation (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai74d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
equal-aqua
equal-aqua74d ago
@kapa.ai All fixed now. It was a mistake on my end that I was overlooking.
kapa.ai
kapa.ai74d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I'm glad to hear that you were able to fix the issue! If you have any more questions or run into any other issues, feel free to ask. Happy coding! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai74d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
How do I sent REST request with useForm from refinedev/antdIn meta property there is only attribute for gqlMutation and gqlQueryWrong datetime format for AntD DatePickerI'm using AntD DatePicker component and when I'm on my edit page and want to fill the form with inituseshowhi how I can refetch the data or to have real time update, it means I want when I do changes on the Icon props@kapa.ai Hi there am using my own svgs in my side bar and I want to change there color on click ...NextJS persistency TanStack + Mantine Table sortingHey, I have made a Table with TanStack + Mantine Table and now i want to implement sorting functionkeyboard shortcutsi went thru the docs but i couldnt find anything regarding keyboard shortcuts. how can i implement tuseList or operator is not workingI have this query for global search but the or operator is returning nothing. I'm using supabase as useForm get the property datahi in Edit page I want to get the property data, in the code I provide, I get all the properties in I am able to do this with **useEffectI am able to do this with **useEffect**, but every hot reload breaks the state. Not sure why. A soluWith **useList**, why was **onSuccess**With **useList**, why was **onSuccess** deprecated?How the subscription works when enabling Live provider for graphql?Hi all, I would like to understand how Refine triggers subscriptions for instance in the CRM examplhow to hide some fields depending on one other?in the edit field i can hide the field using watch exported from useForm but i also need to hide thestop getOne api call on edit pagestop getOne api call on edit page antdNesting routesHow can I nest routes on Navbar? Let's say I have: InventoryProducts and InventoryMaterials resourceAnt Design useTable problemHello, here is my code ``` import { List, useTable } from '@refinedev/antd'; import { Table } from How Can I change the date format?``` <LocalizationProvider dateAdapter={AdapterDayjs}> <Grid container spacing={2}>Save button click but no trigger actionI have this part of component ```import React, { useCallback } from "react"; import { useTranslate, Where is the mantine option when using the CLI or refine.new?When trying to create a new NextJS Project either with the CLI or the website, mantine is not providSupabase functionsI need to use a supabase function to fetch a result of location decoding from long encoded postgis lRefine and metronicIs it possible to use the metronic theme with refine components?