ratty-blush•3y 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

deep-jade•3y 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)}>

ratty-blushOP•3y ago

Hey @yildirayunlu . Thank you for the help.