fascinating-indigo•5mo ago

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>
);
};

11 Replies

kapa.ai•5mo 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•5mo ago

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

fascinating-indigo•5mo ago

@kapa.ai Clicking the save button doesn't do anything.

kapa.ai•5mo 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•5mo ago

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

fascinating-indigo•5mo ago

@kapa.ai I get the following error: phoneNumber.replace is not a function

kapa.ai•5mo 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•5mo ago

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

fascinating-indigo•5mo ago

@kapa.ai All fixed now. It was a mistake on my end that I was overlooking.

kapa.ai•5mo 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•5mo ago

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