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.

[robsonsobral]

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

[hinogi]

to reheat this a bit

// composables/useLargeForm.ts
import { useForm, defineField } from 'vee-validate'
import { reactive, computed, type Ref } from 'vue'
import type { PublicFieldState } from 'vee-validate'

export function useLargeForm<T extends Record<string, any>>(initialValues: T) {
  const form = useForm<T>({ initialValues })
  const fieldStates = reactive<Record<keyof T, PublicFieldState>>({} as any)
  const fields = reactive<Record<keyof T, [Ref, any]>>({} as any)

  // Dynamically create fields
  Object.entries(initialValues).forEach(([name, value]) => {
    const [fieldValue, fieldProps] = defineField(name, (state: PublicFieldState) => {
      fieldStates[name as keyof T] = state
      return { props: { id: name } } // Custom props here
    })
    
    fields[name as keyof T] = [fieldValue, fieldProps]
  })

  const dirtyFields = computed(() => 
    Object.entries(fieldStates)
      .filter(([_, state]) => state.meta.dirty)
      .map(([name]) => name as keyof T)
  )

  return {
    ...form,
    fields,
    dirtyFields
  }
}

@logaretm is the state argument in defineField reactive?

[kendallroth]

Would this handled nested objects or arrays though (which could definitely get messy 😅)?

[sschneider-ihre-pvs]

my current iteration

function expandDotNotation(obj: Record<string, any>): Record<string, any> {
  const result: Record<string, any> = {};

  for (const key in obj) {
    const value = obj[key];
    const parts = key.split('.');

    let current = result;
    for (let i = 0; i < parts.length; i++) {
      const part = parts[i];
      if (i === parts.length - 1) {
        current[part] = value;
      } else {
        if (!(part in current)) {
          current[part] = {};
        }
        current = current[part];
      }
    }
  }

  return result;
}

function isObject(value: any): value is Record<string, any> {
  return typeof value === 'object' && value !== null && !Array.isArray(value);
}

function getDirtyFields(obj: typeof values, prefix = ''): Record<string, any> {
  const dirtyFields: Record<string, any> = {};

  for (const [key, value] of Object.entries(obj)) {
    const fieldKey = prefix ? `${prefix}.${key}` : key;

    if (isObject(value)) {
      Object.assign(dirtyFields, getDirtyFields(value, fieldKey));
    } else if (isFieldDirty(fieldKey as keyof typeof obj)) {
      dirtyFields[fieldKey] = value;
    }
  }

  return expandDotNotation(dirtyFields);
}

const dirtyFields = computed(() => getDirtyFields(values));

this would work with nested field names like 'something.foo' too

[kendallroth]

Gotcha, I may have to look into that further! From some other GitHub Issues/Discussions, I did come across the internal getAllPathStates getter (GitHub), which exposes the internal pathStates ref. This provides a list of all the registered fields with their corresponding flags (type declaration).

const sampleForm = useForm<SampleForm>({
  // Must keep values when unmounting fields to avoid losing state unexpectedly!
  keepValuesOnUnmount: true,
  validationSchema: toTypedSchema(sampleSchema),
  initialValues: getSampleFormValues(props.sample),
});
const {handleSubmit: createHandleSubmit, isSubmitting /* etc */} = refineForm;

const privateSampleForm = sampleForm as unknown as PrivateFormContext<SampleForm>;
const pathStates = computed(() => getAllPathStates());
// NOTE: This list will contain duplicate values (can manually deduplicate)!
const dirtyFields = computed(() => pathStates.value.filter((s) => s.dirty).map((s) => s.path));

However, interestingly enough, even in a simple form of three fields (where admittedly some fields are conditionally mounted!) there appears to be some duplicates in this path list (they are the conditional fields...). This likely isn't an issue normally because VeeValidate seems to reduce to object/map structures (by path) frequently, so duplicates would override each other. However, depending on how values are being added/searched, it seems like it could potentially cause an issue?