fair-rose
fair-rose3y ago

How to transform form data before passing it to data provider?

I have an edit page that should only send changed fields to the server instead of the whole form data. Therefore I need a way to transform the form data before passing it to data provider. What's the best way to do that? I'm using React.js with react-hook-form integration.
2 Replies
other-emerald
other-emerald3y ago
Hey @amirhhashemi You have to add dirtyFields under formState in useForm hook. You can then get the changed keys in the handleSubmit form.
const {
refineCore: { onFinish, formLoading, queryResult },
register,
handleSubmit,
resetField,
formState: { errors, dirtyFields },
} = useForm();

---

const handleSubmitPostCreate = (values: any) => {
console.log(values);
console.log(dirtyFields, isDirty);

onFinish({
...values
});
};


----

<form onSubmit={handleSubmit(handleSubmitPostCreate)}>
const {
refineCore: { onFinish, formLoading, queryResult },
register,
handleSubmit,
resetField,
formState: { errors, dirtyFields },
} = useForm();

---

const handleSubmitPostCreate = (values: any) => {
console.log(values);
console.log(dirtyFields, isDirty);

onFinish({
...values
});
};


----

<form onSubmit={handleSubmit(handleSubmitPostCreate)}>
fair-rose
fair-roseOP3y ago
Hey @yildirayunlu . Thank you for the help.

Did you find this page helpful?