idk why my useForm edit doesnt work
const {
modalProps: editModalProps,
formProps: editFormProps,
show: editModalShow,
} = useModalForm<IColor>({
action: "edit",
warnWhenUnsavedChanges: true,
});
<EditButton
hideText
size="small"
recordItemId={record.id}
onClick={() => editModalShow(record.id)}
/>
<EditColor modalProps={editModalProps} formProps={editFormProps} />
i checked the formValues in EditColor components by editFormProps.form.getFieldsValues but everything is undefined
17 Replies
Hi @tuanna_. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
useModalForm hook from refine provides a way to handle forms in a modal. The action: "edit" prop is used for editing an existing record and it requires the id for determining the record to edit. By default, it uses the id from the route. It fetches the record data according to the id with useOne and returns the queryResult for you to fill the form. After the form is submitted, it updates the record with useUpdate.
In your case, you are using editFormProps.form.getFieldsValues to check the form values in the EditColor component. If everything is undefined, it might be because the data hasn't been fetched yet or there's an issue with the data fetching.
Make sure that the id you are passing to editModalShow(record.id) is correct and the record with that id exists. Also, ensure that your IColor interface matches the data structure of the record you are trying to edit.
If the problem persists, you might want to check the network tab in your browser's developer tools to see if the request to fetch the data is successful and returning the expected data.
For more information, you can refer to the useModalForm (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm/) and useForm (https://refine.dev/docs/api-reference/antd/hooks/form/useForm/) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orangeOP•15mo ago
@kapa.ai im sure the id is correct, i checked the network and the request í fetched sucessfully
Let me check the knowledge base for you. One moment! :books:
----------------------
If the network request is successful and the
id is correct, then the issue might be related to when you're trying to access the form values. The getFieldsValue method gets the values of all fields in the form, but if you're calling this method immediately after showing the modal, the form values might not have been populated yet.
The useModalForm hook fetches the data asynchronously when the modal is shown. This means there could be a delay between when the modal is shown and when the form values are populated. If you're trying to access the form values immediately after showing the modal, they might still be undefined.
You could try accessing the form values later in the component lifecycle, for example in a useEffect hook that has the form values as a dependency. This will ensure that your code runs after the form values have been populated.
Here's an example of how you could do this:
This useEffect hook will run every time the form object changes, which should include when the form values are populated.
If you're still having issues, it might be helpful to provide more context or a more complete code sample.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orangeOP•15mo ago
@kapa.ai it's still doesn't work, here's the full code:
in list.tsx:
const {
modalProps: createModalProps,
formProps: createFormProps,
show: createModalShow,
} = useModalForm<IColor>({
action: "create",
warnWhenUnsavedChanges: true,
});
button trigger modal:
<EditButton
hideText
size="small"
recordItemId={record.id}
onClick={() => editModalShow(record.id)}
/>
components render modal:
<EditColor modalProps={editModalProps} formProps={editFormProps} />
in edit.tsx:
export const EditColor: React.FC<EditColorProps> = ({
modalProps,
formProps,
}) => {
useEffect(() => {
console.log(formProps.form?.getFieldsValue());
}, [formProps.form]);
Let me check the knowledge base for you. One moment! :books:
----------------------
From the code you've provided, it seems like you're trying to use the
useModalForm hook with the EditButton component to edit a color record. However, it appears that you might have mixed up the createModalProps and createFormProps from the useModalForm hook for creating a new record with the editModalProps and editFormProps for editing an existing record.
In your list.tsx file, you're initializing the useModalForm hook for creating a new record, but then you're using editModalShow(record.id) in the onClick handler of the EditButton component. This might be causing the issue because editModalShow is not defined in your provided code.
You should initialize another useModalForm hook for editing a record and use the show method from that hook in the onClick handler of the EditButton component. Here's an example:
Then in your EditColor component, you should be able to access the form values with formProps.form.getFieldsValue() after the data has been fetched and the form values have been populated.
If you're still having issues, please provide more context or a more complete code sample.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orangeOP•15mo ago
@kapa.ai
type EditColorProps = {
modalProps: ModalProps;
formProps: FormProps;
};
export const EditColor: React.FC<EditColorProps> = ({
modalProps,
formProps,
}) => {
useEffect(() => {
console.log(formProps.form?.getFieldsValue());
}, [formProps.form]);
const t = useTranslate();
const breakpoint = Grid.useBreakpoint();
const handleChange = (newColor: Color) => {
const hexColor = newColor.toHex();
if (formProps && formProps.form) {
formProps.form.setFieldValue("code", hexColor);
}
};
return (
<Modal
{...modalProps}
width={breakpoint.sm ? "500px" : "100%"}
zIndex={1001}
>
<Form
{...formProps}
layout="vertical"
initialValues={{
isActive: true,
}}
>
<Form.Item
label={t("colors.fields.name")}
name="name"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("colors.fields.code")}
name="code"
rules={[
{
required: true,
},
]}
>
<ColorPicker onChange={handleChange} showText />
</Form.Item>
<Form.Item
label={t("colors.fields.status")}
name="status"
rules={[
{
required: true,
},
]}
>
<Select
options={[
{
label: "Active",
value: "ACTIVE",
},
{
label: "In Active",
value: "IN_ACTIVE",
},
]}
/>
</Form.Item>
</Form>
</Modal>
);
};
here's the full code of EditColor
Let me check the knowledge base for you. One moment! :books:
----------------------
From the code you've provided, it seems like you're correctly using the
formProps from the useModalForm hook in your EditColor component. You're passing the formProps to the Form component and using formProps.form.getFieldsValue() to log the form values.
However, if the form values are still undefined when you're logging them, it might be because the form values haven't been populated yet. The useModalForm hook fetches the data asynchronously when the modal is shown. This means there could be a delay between when the modal is shown and when the form values are populated.
You could try adding a condition to your useEffect hook to only log the form values when the form is not loading. You can use the formProps.loading property for this:
This useEffect hook will run every time the form object or the loading state changes, which should include when the form values are populated.
If you're still having issues, it might be helpful to provide more context or a more complete code sample.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orangeOP•15mo ago
@kapa.ai arghhhhhhh, i deleted all the create modal stuff and still having the problem
Let me check the knowledge base for you. One moment! :books:
----------------------
I'm sorry to hear that you're still having issues. From the code you've provided, it seems like you're using the
useModalForm hook and the EditButton component correctly.
However, if the form values are still undefined when you're logging them, it might be due to a timing issue. The useModalForm hook fetches the data asynchronously when the modal is shown. This means there could be a delay between when the modal is shown and when the form values are populated.
You could try adding a condition to your useEffect hook to only log the form values when the form is not loading. You can use the formProps.loading property for this:
This useEffect hook will run every time the form object or the loading state changes, which should include when the form values are populated.
If you're still having issues, it might be helpful to provide more context or a more complete code sample.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orangeOP•15mo ago
@kapa.ai gosh, still doesn't work
Let me check the knowledge base for you. One moment! :books:
@tuanna_ That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!
genetic-orangeOP•15mo ago
T__T
gosh
i ended up using useOne manually instead of using useModalForm