1. useInertiaForm

This hook returns a superset of the original return values of useForm, meaning it can be swapped in without breaking anything. While many of the methods have been modified to allow for managing nested form data, they all "fall back" to the original functionality when called with the original signatures.

useInertiaForm overrides the signature of setData, allowing the use of dot-notation when supplying a string as its first argument. It also overrides setErrors, getError and setDefaults, and provides the new methods getData and unsetData to allow easily setting and getting nested form data and errors. All of the nested data handlers use the lodash methods set, unset and get.

Initial data values are run through a sanitizing method which replaces any null or undefined values with empty strings. React cannot register that an input is controlled if its initial value is null or undefined, so doing this allows you to directly pass returned json from the server, which may have undefined values, into the hook without React complaining.

Instantiate it the same way you would with Inertia's useForm:

const { data, setData, getData, unsetData, setError, getError } = useInertiaForm({
  user: {
    firstName: 'Finn'
    lastName: undefined
  }
})
console.log(data)
/* {
  user: {
    firstName: 'Finn',
    lastName: ''
  }
} */

setData

You can now use dot-notation to set nested data on the form data object.

setData('user.lastName', 'Human')
setData('user.brothers[0]', 'Jake')
/* { 
  user: { 
    firstName: 'Finn',
    lastName: 'Human'
    brothers: ['Jake']
  } 
} */

getData

Retrieve nested data using dot-notation.

getData('user.firstName')
// 'Finn'

unsetData

Safely destroy a nested value on the form data object.

unsetData('user.brothers')
/* { 
  user: { 
    firstName: 'Finn'
    lastName: 'Human'
  } 
} */

getError

Retrieve errors using dot notation as keys. Errors are not stored as nested data, but rather with the nested data "address" as a key. This mimics the way errors are returned from the server, but still allows us to use the same lookup string for both the data and the errors.

getError('user.firstName')
// 'Must exist'

In order to make error retrieval match the keys used for data setting and getting, errors returned by the server are prepended with a model name. However, this is only done if the original data passed to useInertiaForm has a single parent key. For instance, if the form data is a user object as such:

const form = useInertiaForm({
  user: {
    username: 'somebody'
  }
})

In the example above, data and error setters and getters will work with the following values:

form.getData('user.username')
form.setData('user.username', 'other')

form.getError('user.username')
form.setError('user.username', 'An Error!')

If form data is a flat object, or has two root models, the keys won't be rewritten:

const form = useInertiaForm({
  username: 'somebody',
  firstName: 'Some',
  lastName: 'Body',
})

form.getData('username')
form.setData('username', 'other')

form.getError('username')
form.setError('username', 'An Error!')