Modifications

Each form field has its own isModified flag found in the modifications object returned by the form instance.

When the form field current value is not equal to its value defined in the initial property, the isModified flag will be set to true.

By default, that equality is determined with strictly equal operator (===) for primitives, and deep equality for objects.

Value of the initial property can change (be updated) during your form instance lifecycle, and Formeus will update modifications and report only modified fields in your onSubmitForm function.

Also, by default, un-modified fields will get auto-synced to the latest initial values.

import { useForm } from "@formeus/react"
function Profile() {
  /// Fetch profile data
  const profileData = useProfileData()
 
  /// Update initial values with the latest profile data
  const { values, update, submit, modifications } = useForm({
    initial: {
      name: profileData.name,
      address: profileData.address,
    },
    onSubmitForm: (values, meta, modifiedFields) => {
      /// Update only modified fields.
      // return api.updateProfile({ ...modifiedFields })
    },
  })
 
  return (
    <>
      <input
        value={values.name}
        onChange={(e) => update("name", e.target.value)}
      />
      <input
        value={values.address}
        onChange={(e) => update("address", e.target.value)}
      />
      <button onClick={() => submit()}>Update</button>
    </>
  )
}

Comparators

If the default behaviour provides unexpected results, or is not performant enough, you can pass custom comparators property which can define a custom comparator functions for every form field.