Q: Is it possible to only submit dirty values?

[hinogi]

Often a full update of a row is not necessary and may send of unwanted triggers on the database. So now my question is, is it possible in the handleSubmit function to get only the dirty field values to populate a payload to update whether rest or graphql doesn't matter I guess.

[sschneider-ihre-pvs]

Also I came across this.

this shows an isFormDirty() call. I confuses me that the internal value _dirty shows the form is dirty because it is at that point but the reactive value shows it is not dirty

[logaretm]

I moved this here since it is a question.

---

Unless you check each field meta.dirty individually, if you can't then it is not possible at the moment. Alternatively, you can use a diff library to give you the updated values from a handleSubmit handler call. Something like deep-object-diff could work here.

[logaretm]

useIsFieldDirty is a composition API function. You cannot use it outside a setup call. So you can't use it in watchers, computed, or functions. You probably should be seeing some warnings in your console.

Also, this function relies on being a child of a component called with useField so you can't use it outside it either. I understand this is very restrictive but that's how provide/inject works mostly.

I could improve the API to allow it to be used outside the field component but that's something to think about for 4.6.

[sschneider-ihre-pvs]

So, is there any possibility to get a list of only dirty field in form submit?

[sschneider-ihre-pvs]

What about a useDirtyFields for useForm? to get all dirty fields on the form?

[timmaier]

Here is what I've been doing I agree though it'd be very nice to have a useValuesDirty on the useForm to get all dirty fields for a patch request:

function checkDifference(currentFormData, originalFormData) {
    return Object.keys(currentFormData).reduce((formData, field) => {
        if (currentFormData[field] !== originalFormData[field]) {
            formData[field] = currentFormData[field];
        }
        return formData;
    }, {});
}

const form = reactive(useForm());
const onSubmit = form.handleSubmit(async values => {
    console.log(form.meta.initialValues);
    values = checkDifference(values, form.meta.initialValues); 
    }
);

[robsonsobral]

My backend co-workers are dying for something like that. Something like editedValues, just like the controlledValues, would be useful.