Support nested form data

[aviemet]

Since Rails and Laravel both expect form data as nested objects by default, could that be supported by useForm?

Currently, the only ways to submit nested data are to either rely on the transform method, which is currently unreliable, or manually submit the data using Inertia.post.

I would like to be able to define a form as such:

export default ComponentWithForm = ({ user, person }) => {
  const form = useForm({ user: user, person: person })

  const handleSubmit = e => {
    e.preventDefault()
    form.post('/endpoint')
  }

  return (
    <form onSubmit={ handleSubmit }>
      <input value={ form.user.username } onChange={ e => form.setData('user.username', e.target.value) } />
      <input value={ form.person.name } onChange={ e => form.setData('person.name', e.target.value) } />
    </form>
  )
}

Currently, the way I achieve this is as follows:

export default ComponentWithForm = ({ user, person }) => {
  const form = useForm({
    username: user.username,
    name: person.name
  })

  const handleSubmit = e => {
    e.preventDefault()

   form.transform(data => ({
      user: {
        username: data.username
      },
      person: {
        name: data.name
      }
    })
    form.post('/endpoint')
  }

  return (
    <form onSubmit={ handleSubmit }>
      <input value={ form.username } onChange={ e => form.setData('username', e.target.value) } />
      <input value={ form.name } onChange={ e => form.setData('name', e.target.value) } />
    </form>
  )
}

The issue I have with the current way to achieve this is that I'm breaking down the data to put it into the form, then building it back up in the transform method to submit it back to the server in the original form. I would appreciate the liberty of only using the transform method when I actually need to transform data. Currently, I need to rely on transform every time I submit data since Rails expects form data to be nested in a root property.

Thank you

[balthild]

I've implemented a useInertiaForm hook that supports dot notation with dot-prop, immer and some TS type magic: https://gist.github.com/balthild/1f23725059aef8b9231d6c346494b918

Note that it's not a drop-in replacement for useForm. It does not support FormData. Some of its behaviours are different from useForm too. Feel free to improve it and publish it as a support package for inertia-react if you have an idea.

[adamndev]

+1 for setting nested properties with dot notation 👍🏻

[sbc640964]

For this I created my own useForm and inside it the setData function is updated with lodash

import {set} from "lodash/fp";
import {useForm as useInertiaForm} from "@inertiajs/inertia-react";

export function useForm(...args){
   const form = useInertiaForm(...args);
   
   function setData(key, value){
     form.setData(
            function (data){
                return set(name, value, data);
            }
        );
   }

  return { ...form, setData}
}

[robzlabz]

Thanks, my problem solved

[aviemet]

I created a PR for this to hopefully start a discussion about whether this should be included. I only changed the React version since I don't know Vue or Svelte.

[joelpanor]

Any update?

[aviemet]

I created a solution for this and published it as an npm package if it helps anyone. It also has all of the extra things I needed in order to have a full featured form library based on Inertia.

[Aigarsss]

Big + for this feature. @reinink I think it would be really useful to implement in core.