Feature request: submit only dirty fields

[nandorojo]

Originally discussed 2 years ago: #1991

Our backend processes updates much faster if it only needs to update necessary fields. I'd like a first-class way to only submit fields that are dirty. Or, a well-documented approach for this. Thanks!

[craigmcc]

You have total control over what your onSubmit handler on the form actually does, right? Why not just have your own logic compare the submitted values to what was, for example, specified in defaultValues to the useForm hook? Why should that be up to a form library?

[nandorojo]

Here's what I came up with for now: #9472 (reply in thread)

[bluebill1049]

Thanks for the idea, Maybe we can export a function (not within the main library) to gather updated field values, and keep the main library light and small.

function getDirtyFields({ formState: { dirtyFields }, getValues}) {
  // with dirtyFields and getValues() we can return updated fields values
} 

const hookFormMethods = useForm();

onSubmit={() => {
  const updatedFields = getDirtyFields(hookFormMethods)
}}

onClick={() => {
  const updatedFields = getDirtyFields(hookFormMethods)
}}

It would be quite flexible as you can use it even with click event without validation, eg save for later.

[bluebill1049]

I think this is due to the proxy not updating properly. If I read formState.dirtyFields in render, it gets fixed. But I don't want to re-render for this necessarily. I only want it at submit time.

This is getting improved in the next feature release. Dirty and touched fields will always get tracked and only re-render with the proxy detected.

[nandorojo]

Awesome, thank you @bluebill1049!!

[YouMinTW]

I'm not sure if anyone is still following up on this topic, but I have used the following code to meet my needs. It can perform nested searches, but I did not specifically handle deleted items in the array.

thank you @bluebill1049 @nandorojo

function getDirtyFields(dirtyFields, formValues) {
  if (typeof dirtyFields !== 'object' || dirtyFields === null || !formValues) {
    return {};
  }

  return Object.keys(dirtyFields).reduce((accumulator, key) => {
    const isDirty = dirtyFields[key];
    const value = formValues[key];

    // If it's an array, apply the logic recursively to each item
    if (Array.isArray(isDirty)) {
      // eslint-disable-next-line no-underscore-dangle
      const _dirtyFields = isDirty.map((item, index) => getDirtyFields(item, value[index]));
      if (_dirtyFields.length > 0) {
        // eslint-disable-next-line no-param-reassign
        accumulator[key] = _dirtyFields;
      }
    }
    // If it's an object, apply the logic recursively
    else if (typeof isDirty === 'object' && isDirty !== null) {
      // eslint-disable-next-line no-param-reassign
      accumulator[key] = getDirtyFields(isDirty, value);
    }
    // If it's a dirty field, get the value from formValues
    else if (isDirty) {
      // eslint-disable-next-line no-param-reassign
      accumulator[key] = value;
    }

    return accumulator;
  }, {});
}

describe('getDirtyFields', () => {
  it('should return an empty object if dirtyFields is not an object or is null', () => {
    expect(getDirtyFields(null, {})).toEqual({});
    expect(getDirtyFields('not an object', {})).toEqual({});
  });

  it('should return an empty object if formValues is not provided', () => {
    expect(getDirtyFields({}, null)).toEqual({});
  });

  it('should return an object with dirty fields', () => {
    const dirtyFields = { field1: true, field2: false, field3: true };
    const formValues = { field1: 'value1', field2: 'value2', field3: 'value3' };
    expect(getDirtyFields(dirtyFields, formValues)).toEqual({ field1: 'value1', field3: 'value3' });
  });

  it('should handle nested objects', () => {
    const dirtyFields = { field1: { subfield1: true, subfield2: false }, field2: true };
    const formValues = { field1: { subfield1: 'value1', subfield2: 'value2' }, field2: 'value3' };
    expect(getDirtyFields(dirtyFields, formValues)).toEqual({ field1: { subfield1: 'value1' }, field2: 'value3' });
  });

  it('should handle arrays', () => {
    const dirtyFields = {
      field1: [
        { subfield1: true, subfield2: false },
        { subfield1: false, subfield2: false },
        { subfield1: true, subfield2: true },
      ],
      field2: true,
    };
    const formValues = {
      field1: [
        { subfield1: 'field1[0]subfield1-new', subfield2: 'field1[0]subfield1-old' },
        { subfield1: 'field1[1]subfield1-old', subfield2: 'field1[1]subfield1-old' },
        { subfield1: 'field1[2]subfield1-new', subfield2: 'field1[2]subfield1-new' },
      ],
      field2: 'value4',
    };
    expect(getDirtyFields(dirtyFields, formValues)).toEqual({
      field1: [
        { subfield1: 'field1[0]subfield1-new' },
        {},
        { subfield1: 'field1[2]subfield1-new', subfield2: 'field1[2]subfield1-new' },
      ],
      field2: 'value4',
    });
  });
});

[guilhermeutzig]

Exactly what I needed, very helpful.

Thank you @YouMinTW

[sualko]

It would be super helpful if this could be included in the library. Also the documentation indicates that something like this would be possible to configure: "defaultValues will be included in the submission result by default.".

I would imagine an configuration option to decide if default values will be included in the submitted data or not.

[itsosmx]

This is how I do

  const onSubmit: SubmitHandler<IType> = async (data: IType) => {
    const _data: IType= {} as IType;
    Object.keys(dirtyFields).map((key) => {
      _data[key] = data[key as keyof IType];
    });

    if (!Object.keys(_data).length) return // no changes
      // if change...
  };