React-hook-form: [REQ]: Nested Object model

[stramel]

Is your feature request related to a problem? Please describe.
It is difficult to work with nested object models in the form with the current setup. This feels slightly related to the array model (#49 and #33). For example, when working with models like so:

{
    name: {
        first: 'John',
        last: 'Doe',
    }
}

Describe the solution you'd like
It would be nice on the form to be able to use syntax like <input name="name.first"> and <input name="name.last"> to specify a nested object model.

Describe alternatives you've considered
Another option that I have seen, is a custom component that is considered a "grouping" that would associate the inputs with the nested object. Something like:

<Grouping context="name">
    <input name="first">
    <input name="last">
</Grouping>

[bluebill1049]

I think this would be a nice option to start with:

<input name="name.first"> and <input name="name.last">

I will think about a better approach around that, in the meantime, you will probably have to map the value.

[bluebill1049]

hey @stramel and @cabezonidas,

What about this idea?

<input name="name[0].firstName"> and <input name="name[0].lastName">

and produce

name: [ { firstName: '', lastName: '' } ]

---

<input name="name.firstName"> and <input name="name.lastName">

and produce

name: { firstName: '', lastName: '' }

[bluebill1049]

what's your thoughts @barry4dev ?

[stramel]

@bluebill1049 I like this approach and think it is easy to comprehend from the developer's point-of-view. I'm trying to think of any cases that this _may_ cause issues but at first glance, it seems like a good approach.

[bluebill1049]

cool, I start working on the feature already, keen to see @barry4dev 's opinions too 👍

[cabezonidas]

hey @stramel and @cabezonidas,

What about this idea?

<input name="name[0].firstName"> and <input name="name[0].lastName">

and produce

name: [ { firstName: '', lastName: '' } ]

<input name="name.firstName"> and <input name="name.lastName">

and produce

name: { firstName: '', lastName: '' }

Are you talking about the second option? If so, it'd be a good feature cause name attr is consistent with the path of the value. I would expect if my object is like { name: { first.name: '', last.name: '' } to write html in the form like <input name="name['first.name']">

What I'm saying is that it needs to follow json accessing rules for also names that contain dots as part of their name, as well as other special chars. It would be great to produce same business model. I think get and set functions from lodash are what you need for this. Even for arrays, they work great.

The first option, though, I think helps solve this specific case, and still, you have to do a mapping on the path of the object, and the dev will have to know this rule for nested json/arrays. In my opinion, having the exact path in the name attr will solve all cases.

[bluebill1049]

@cabezonidas we want to support both
<input name="name[0].firstName"> and <input name="name[0].lastName">
name: [ { firstName: '', lastName: '' } ]

<input name="name.firstName"> and <input name="name.lastName">
name: { firstName: '', lastName: '' }

I have followed JSON format to come up with naming like above.

currently version only support
<input name="firstName[0]"> and <input name="lastName[0]">
firstName: []
lastName: []

[bluebill1049]

hey @stramel,

I built a beta version if you are happy to have a try. if everything goes well should be able to release it this week.

npm i [email protected]

cheers
bill

[stramel]

@bluebill1049 Thank you for the quick work!

I tested all these scenarios (Checked worked):

• [x] Array Syntax firstName[0]
• [ ] Nested Array Syntax person[0]numbers[0]
• [x] Object Syntax name.first
• [ ] Nested Object Syntax person.name.first
• [x] Array of Objects Syntax person[0].firstName
• [ ] Array of Objects with Nested Object person[0].name.first

I'm not sure if you plan to support Nested Syntax.

[bluebill1049]

Probably required a lot more work to make it work for a deep nested object. right now it only supports one level.

maybe we just do progressive here, let's support 1 level first and then looking for a better solution for deep nested. any thoughts?

[bluebill1049]

wondering if there is any package out there, can convert this person[0].numbers[0] to object 🤔

[bluebill1049]

anyway I will publish what I got soon and working on the nested object after that 👍

[bluebill1049]

ok, this version should tick everything now:

[email protected]

[stramel]

Dang, you beat me to it. It's a bit sloppy but you can take a look. https://gist.github.com/stramel/3514f9f7611ebaf87ce55b7e6357c0fb

I will take a look at the updated version

[stramel]

I tested all these scenarios (Checked worked):

• [x] Array Syntax firstName[0]
• [x] Nested Array Syntax person[0]numbers[0]
• [x] Object Syntax name.first
• [x] Nested Object Syntax person.name.first
• [x] Array of Objects Syntax person[0].firstName
• [x] Array of Objects with Nested Object person[0].name.first

@bluebill1049 All scenarios appear to work now with [email protected]. Thank you for addressing this quickly! Would love to see the code that you came up with.

[bluebill1049]

ha not gonna lie, I am stealing code from lodash. you can take a look the last commit.

[bluebill1049]

Thanks very much for your support @stramel wouldn't mind to put you as a contributor as you help on testing and even contribute code 👍 (if you don't mind)

https://github.com/bluebill1049/react-hook-form/releases/tag/v3.11.0

[cabezonidas]

Thanks! I'll give it a go soon. Maybe you'd want as well unset from lodash for dynamic forms. It's like delete key, (I saw that in the code) but you can send a complex path, like an element of a nested array, same as get and set. Anyway, I'll check it out soon. Good work, thank you!

[stramel]

@bluebill1049 I would be happy to help out where I can. I'm planning on fully implementing this in one of my work's projects. I'm sure it will be a good test of this library.

Thanks again! I'm going to close this issue with the release of 3.11.0.

[bluebill1049]

@stramel thank you for contributing and your help on this issue :) much appreciated

[barrymay]

@bluebill1049 @stramel So sorry I missed this conversation (I gotta reduce my notification list a bit). I think the idea is fascinating and likely helpful. I'll try it out in 3.11 and see how it goes!

[bluebill1049]

all good @barry4dev ❤️

[The-Code-Monkey]

How would we make this dynamic in the terms of similarly how reduxform and other libraries have their fieldarray that lets the user dynamically add another index to the array.

[bluebill1049]

@The-Code-Monkey check out the example folder for array fields. i think it's much simpler than react-form IMHO https://codesandbox.io/s/6j1760jkjk

[dextervip]

Does this implementation supports yup schema validation with nested objetcs in array? I am trying to code it but I am not able to get errors on nested objects.

[bluebill1049]

@dextervip it should tho, can you supply a codesandbox which is not working for you?

[simonv3]

Could this be implemented for watch too? Currently that spits out:

 {"items[0].quantity": "12", "items[1].quantity": "12", "items[2].quantity": "5", "items[3].quantity": "25" }

But handleSubmit does handle it properly.

[bluebill1049]

@simonv3 try to watch('items')

[simonv3]

Oh sweet, that works. Thanks! Is there a reason it doesn't unpack the entire changed object with just watch()?

[bluebill1049]

I will consider introducing a nest prop as the second argument for watch which will return you data as nested object.

[AlexJangam]

I have a reverse scenario, where my field names are dynamic(user defined) and allows .(dot), and 'react hook form' is considering as a nested object. I want to consider it as plain key. Is there a attribute or option that I can mention to form that its not nested?

its not {first : { second: ''}} but {'first.second': ''}

[bluebill1049]

@AlexJangam we are using dot to detect nested object, it's difficult or impossible to differentiate.

[tafelito]

@bluebill1049 is it possible to access a nested field from an object with a dynamic key

If I have

{
   "fields": {
     "dsndknskdnsd": {
        "name": "",
        "lastName": ""
     }
  }
}

because just by using fields.dsndknskdnsd.name in the name does not seem to work, and neither the watch

[bluebill1049]

fields

watch('fields') should work.

[tafelito]

That works but then you gett all fields not just 1

What about the name of the input?