form icon indicating copy to clipboard operation
form copied to clipboard

[Feature request] Form Composition: Ability to compose set of common fields to multiple different form

Open valerii15298 opened this issue 8 months ago • 4 comments

Would be good to have ability to compose set of fields to different forms that have same common field using typescript.

react-hook-form already has such functionality via Lenses: https://github.com/react-hook-form/lenses

Original feature request which ended up by creating lenses for react-hook-form: https://github.com/orgs/react-hook-form/discussions/7354

Overview Imagine this structure of forms:

interface Address {
  street: string
  houseNumber: number
  city: string
  country: string
}

interface Person {
  name: string
  address: Address
}

interface Order {
  item: string
  shippingAddress: Address
}

I wanna create component to display Address part of any form. So that in other forms(like Order and Person and many more which will have address field structure) I can declaratively reuse Address fields by just providing basePath to them and having correct typescript validation and typings.

valerii15298 avatar May 02 '25 00:05 valerii15298

Would #1469 be the kind of thing you're looking for? It's not confirmed to be added, but if you have feedback on the implementaion, let me know.

LeCarbonator avatar May 12 '25 05:05 LeCarbonator

@LeCarbonator yep, seems like what i asked for. Thank you! But still would be good to have an api as simple and flexible at the same time as possible. Like react hook form lenses has. They have lens.reflect(...) for example which allows to map fields with different names to the fields which nested lense part expects. And for now RHF lenses api seems just simpler and more flexible as i see.

But overall yes, this is the direction i was asking for

valerii15298 avatar May 12 '25 07:05 valerii15298

@LeCarbonator yep, seems like what i asked for. Thank you! But still would be good to have an api as simple and flexible at the same time as possible. Like react hook form lenses has. They have lens.reflect(...) for example which allows to map fields with different names to the fields which nested lense part expects. And for now RHF lenses api seems just simpler and more flexible as i see.

But overall yes, this is the direction i was asking for

I see! Perhaps there's a way to implement that. As it is right now, the reason the mapping wasn't supported is because validation can simply be inherited from the field instead of requiring reflection on all properties.

I'll look into it!

LeCarbonator avatar May 12 '25 07:05 LeCarbonator

Crutchcorn and I have tinkered with the mapping a bit, and I think it's going in a good direction. Could you take another look at the PR and check out the mapping section? @valerii15298

LeCarbonator avatar Jun 01 '25 09:06 LeCarbonator

Implemented with #1469 . Thanks for the request!

LeCarbonator avatar Jul 25 '25 05:07 LeCarbonator