vantezzen / auto-form

🌟 A React component that automatically creates a @shadcn/ui form based on a zod schema.
https://vantezzen.github.io/auto-form/
2.29k stars 81 forks source link

Improvement Proposal #34

Open laurent512 opened 9 months ago

laurent512 commented 9 months ago

Hello,

Just discovered your autoform component and it is great !

May I ask if it would be possible to include a "hidden" optional field. In my casse, it would be usefull so that the schema can contain information ,but it should be sent in secret by the browser :)

Also, would it be possible to put two inputs on the same row for example? :) (like on the image below ) image

vantezzen commented 9 months ago

Hey, thank you for the feedback. As for hidden fields you have two options:

  1. Most likely your form submission etc. is handled inside an onSubmit handler in React. You can just add your hidden data there before sending it to the server
  2. If you use plain HTML form behaviour for form submission, you can add your own HTML elements by passing them as children (https://github.com/vantezzen/auto-form#adding-other-elements)

As for rendering multiple input elements in a row, its not currently possible like that, though it might be possible by using custom parent containers.

laurent512 commented 9 months ago

Thank you for your answer !

Concerning the hidden field, as far as I understand, both of the solutions you suggest means a different schema at the client and at the server side. The one in autoform that would not include the hidden field, and the one at the server that would include it. Ideally I would use the same, but maybe I misunderstood your proposed solutions.

Also, thank you for the many input elements in a row, if you share examples, I would be very interested :)

nonwiz commented 9 months ago

Would it be possible to have a renderParent that includes all the fields instead of base on one field? @vantezzen.

<AutoForm fieldConfig={{
renderParent: ({childFieldA}, {childFieldB}, {childFieldC}) => <div>
<row>
<colA> {childFieldA} </colA>
<colB> {childFieldB> </colB>
</row>
</div>
}}> </AutoForm>
r-ohan commented 8 months ago

+1 these are both killer features that would make this library drastically better.

morrisseybr commented 4 days ago

I'm currently working on a solution to this problem for a project of mine. I will do a pull request to this as soon as it's stable.