search

kettanaito / react-advanced-form

Functional reactive forms. Multi-layer validation, custom styling, field grouping, reactive props, and much more.
https://redd.gitbook.io/react-advanced-form
MIT License
217 stars 24 forks source link

Question : How to handle multiple values ? #411

Closed Gus19 closed 3 years ago

Gus19 commented 3 years ago

Hello,

I have a form with :

I found the components for a single radio/checkbox (and they work well) but I don't figure how to wrap this components into a parent.

Could you help me ?

Ideally, I would like to get the following json :

{
  radio: ID10,
  chekboxes: [
    ID20,
    ID21,
    ID22
  ]
}

By the way I don't understand either for the select, I set the multiple attribute but only one value is selected in the end (but I don't plan to use this one for the moment).

Thanks !

kettanaito commented 3 years ago

There's very little value in composing those values on the component level. Consider composing them on the serialization level instead. This means having 1 radio list and 1 checkboxes list as separate fields, and then transforming them to your liking when serializing the form in the onSerialize prop of the Form.

If you really need a complex field as you've described, you can do it via the createField function. It supports custom options to map and serialize complex fields. Here's an example that implements a BirthDate field that composes 3 standalone inputs:

https://github.com/kettanaito/react-advanced-form/blob/e5a1ae20ac32e2dfcb29db2db507bd44e0062a3e/examples/fields/BirthDate.jsx#L70-L116