Get only the dirty field values

[dandv]

Is there a direct way to get dirty field values? This is useful when submitting updates to an API endpoint - only transmit over the wire the changed field(s), not the entire object/form.

formState.dirtyFields is an object with true values for the fields, and that could be used to match over the handleSubmit data, but doing that properly takes recursion, and before I implement it by hand, I wanted to check if this is already provided more directly. A parameter to getValues would be great.

[bluebill1049]

hey @dandv we don't have such mechanism, it's easier to implement at your App level.

[platoonic]

Hey @bluebill1049
I think it would be pretty cool if RHF had an optional argument for "handleSubmit" that submits only touched (dirty) values,
It's a quite needed thing for sending requests to a PUT endpoints, What are your thoughts?

[bluebill1049]

looks like I have missed this message, feel free to send a feature request on this.

[dandv]

OK, this was pretty easy to implement in a generic way:

// Map RHF's dirtyFields over the `data` received by `handleSubmit` and return the changed subset of that data.
export function dirtyValues(dirtyFields: object | boolean, allValues: object): object {
  // If *any* item in an array was modified, the entire array must be submitted, because there's no way to indicate
  // "placeholders" for unchanged elements. `dirtyFields` is `true` for leaves.
  if (dirtyFields === true || Array.isArray(dirtyFields))
    return allValues;
  // Here, we have an object
  return Object.fromEntries(Object.keys(dirtyFields).map(key => [key, dirtyValues(dirtyFields[key], allValues[key])]));
}

Code sandbox with tests at https://codesandbox.io/s/ts-jest-34w4x?file=/src/index.ts.

I think this would be a useful feature to add to getValues behind an option. I'll let you decide if it's worth it and adjust the types.

[gremo]

@MoatezNG your code doesn't work right, you need to add che true check before Array.isArray.

[pedrollmatias]

@GollyJer TS still doesn't like this: dirtyValues(dirtyFields[key], allValues[key])])

returns:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'false | Record<string, unknown>'. No index signature with a parameter of type 'string' was found on type 'false | Record<string, unknown>'.

@ghost A code that typescript likes:

type UnknownObject = Record<string, unknown>;
type UnknownArrayOrObject = unknown[] | UnknownObject;

const dirtyFields = (
  dirtyFields: UnknownArrayOrObject | boolean | unknown,
  allValues: UnknownArrayOrObject | unknown
): UnknownArrayOrObject | unknown => {
  if (dirtyFields === true || Array.isArray(dirtyFields)) {
    return allValues;
  }

  const dirtyFieldsObject = dirtyFields as UnknownObject;
  const allValuesObject = allValues as UnknownObject;

  return Object.fromEntries(
    Object.keys(dirtyFieldsObject).map((key) => [key, dirtyFields(dirtyFieldsObject[key], allValuesObject[key])])
  );
};

[dannobytes]

An alternative that uses a "reducer" to ensure the function is "pure" and has some inferred typings to ensure that values is an all-inclusive superset of dirtyFields, i.e. ensures that all dirty fields has a corresponding values match.

function getDirtyValues<DirtyFields extends Record<string, unknown>, Values extends Record<keyof DirtyFields, unknown>>(
  dirtyFields: DirtyFields,
  values: Values
): Partial<typeof values> {
  const dirtyValues = Object.keys(dirtyFields).reduce((prev, key) => {
    // Unsure when RFH sets this to `false`, but omit the field if so.
    if (!dirtyFields[key]) return prev;

    return {
      ...prev,
      [key]:
        typeof dirtyFields[key] === 'object'
          ? getDirtyValues(dirtyFields[key] as DirtyFields, values[key] as Values)
          : values[key],
    };
  }, {});

  return dirtyValues;
}

[Szorcu]

@dannobytes I love your solution. Here is my version of your approach 🙂

export const getItemsDirtyData = <
  TData extends Record<keyof TDirtyItems, unknown>,
  TDirtyItems extends Record<string, unknown>
>(
  data: TData,
  dirtyItems: TDirtyItems
): Partial<TData> => {
  const dirtyItemsEntries = Object.entries(dirtyItems)

  return dirtyItemsEntries.reduce((dirtyData, [name, value]) => {
    if (typeof value !== "object") {
      return { ...dirtyData, [name]: data[name] }
    }

    return {
      ...dirtyData,
      [name]: getItemsDirtyData(
        data[name] as TData,
        dirtyItems[name] as TDirtyItems
      ),
    }
  }, {})
}

[brian-gates]

Yet another variation. This one returns only the keys of values which are dirty, with a value of true. Basically the same API as dirtyFields but with clean fields omitted.

export const getDirtyFields = <
  TData extends Record<keyof TDirtyItems, unknown>,
  TDirtyItems extends Record<string, unknown>,
>(
  formValues: TData,
  dirtyItems: TDirtyItems,
): Partial<TData> => {
  return Object.entries(dirtyItems).reduce((dirtyData, [key, value]) => {
    if (value === false) return dirtyData;
    if (value === true) return { ...dirtyData, [key]: true };

    const child = getDirtyFields(
      formValues[key] as TData,
      dirtyItems[key] as TDirtyItems,
    );

    if (typeof child === 'object' && Object.keys(child).length === 0) {
      return dirtyData;
    }

    if (Array.isArray(child) && child.length === 0) {
      return dirtyData;
    }

    return {
      ...dirtyData,
      [key]: child,
    };
  }, {});
};

[Ali-Hussein-dev]

the recommend new API is pretty useful in many cases. but I prefer another name to use that is a bit intuitive like getModifiedFields or modifiedFields

[Moshyfawn]

"Dirty" input is the common way to refer to an input which value has been modified and is different from it's default value.

[tykhan]

That an alternate version of helper, which gives you perfect TS autocomplete in your components

import { FieldValues } from 'react-hook-form';

export const filterChangedFormFields = <T extends FieldValues>(
    allFields: T,
    dirtyFields: Partial<Record<keyof T, boolean>>
): Partial<T> => {
    const changedFieldValues = Object.keys(dirtyFields).reduce((acc, currentField) => {
        return {
            ...acc,
            [currentField]: allFields[currentField]
        }
    }, {} as Partial<T>);

    return changedFieldValues;
};

[lveillard]

So in my case i have an array of strings which generates a ts error. Adapting your code to this

export const filterChangedFormFields = <T extends FieldValues>(
  allFields: T,
  dirtyFields: Partial<Record<keyof T, boolean | boolean[]>>
): Partial<T> => {
  const changedFieldValues = Object.keys(dirtyFields).reduce(
    (acc, currentField) => {
      const isDirty = Array.isArray(dirtyFields[currentField])
        ? (dirtyFields[currentField] as boolean[]).some((value) => value === true)
        : dirtyFields[currentField] === true;
      if (isDirty) {
        return {
          ...acc,
          [currentField]: allFields[currentField],
        };
      }
      return acc;
    },
    {} as Partial<T>
  );

  return changedFieldValues;
};

Fixes it

Also i agree,,, that this should be a feature getDirtyFields() or something like this

[minmaxdata]

these last examples arent recursive tho

[pahhh-blo]

I think using dirty fields is not enough so I'm proposing a convention to extract only the data that has been modified from the form's state. What do you think about it?

[rudrava-myhomepathway]

const cleanData = data => Object.entries(data)
    .filter(([key, value]) => value !== undefined)
    .reduce((obj, [key, value]) => {
        obj[key] = value;
        return obj;
    }, {});


const dirtyValues = (dirtyFields, allValues) => {
    if (dirtyFields === true || Array.isArray(dirtyFields))
        return allValues;
    // Here, we have an object
    return cleanData(Object.fromEntries(Object.keys(dirtyFields).map(key => [key, dirtyFields[key] ? dirtyValues(dirtyFields[key], allValues[key]) : undefined])));
}

you can use this if you want just the field swith the data