Comments (3)
Hey, @gederer! Can you share a complete example of how you made it work with us? I'm designing an API to deal with nested objects and arrays, and it would be great to contemplate your use case when thinking about it.
from remix-forms.
Hey, @02JanDal! Thanks for creating this issue 💪
We don't have support for objects and arrays in the schema yet, but it is high on our priority list to add it :)
In the meantime, you can still use Remix Forms for the schema above, but instead of rendering a Field
component, you'll need to render a custom UI directly inside of Form
's children, with the help of register
and other react-hook-form
props. I haven't tested it yet, but I think all the client-side validations will work correctly that way.
The server-side validations do work with objects and arrays already, so you're covered on that end.
Can you please let us know if this works?
from remix-forms.
Hey, @danielweinmann. I tried this with a set off checkboxes, all with the same name
. This is my Zod schema:
const schema = z.object({
name: z.string().nonempty(),
age: z.number(),
hobbies: z.array(z.string()).nonempty("Must have at least one hobby")
});
When I have two or more checkboxes checked, I get the correct values
passed into my mutation
function. But, if I have only one checkbox checked, the form doesn't submit. I (strongly!) suspect this is because a single value is passed as a scalar, rather than as an array. Do you know how I might patch this up?
Update:
Changed my Zod schema to:
const schema = z.object({
name: z.string().nonempty(),
age: z.number(),
hobbies: z.union([z.string().optional(), z.array(z.string()).optional()]).optional()
.transform(val => typeof val !== "undefined" ? Array.isArray(val) ? val : [val] : [])
});
Now, it submits correctly with a single checkbox or multiple checkboxes checked. But, when I submit with zero checkboxes checked, it focuses (but does not check) the first checkbox without submitting. Oddly, if I submit a second time after the first checkbox is focused, it does submit correctly. Not sure why.
Update 2 (Finally got it):
const schema = z.object({
name: z.string().nonempty(),
age: z.number(),
hobbies:
z.preprocess(
val => !!val ? Array.isArray(val) ? val : [val] : [],
z.array(z.string())
)
});
from remix-forms.
Related Issues (20)
- Inconsistent display of selected option in select control HOT 4
- Custom Component typings HOT 2
- Error: Cannot submit element that is not <form>, <button>, or <input type="submit|image"> HOT 1
- Multiple Checkboxes HOT 3
- Define Input type through fieldTypes HOT 5
- Bring `errorMessagesForSchema` from `domain-functions` to this library HOT 1
- form with mode="onChange" button flashes when it hydrates HOT 2
- Could not resolve "@deepkit/type" HOT 3
- Overriding fields HOT 2
- <Field hidden /> is not passing `type="hidden"` to its input
- Validation error not shown when field is an array
- Can't trigger onSubmit from Form-component HOT 6
- Handle `z.object` HOT 1
- Can remix-forms function within a PWA / client side only context? HOT 4
- Zod schema array of objects HOT 1
- Remix forms site example no longer maintained? HOT 1
- [BUG] Field error(s) not showing if using additional component HOT 1
- Input ID's not always unique when multiple forms are rendered
- Example of how to do crud correctly?
- How to add a reset button on the side of the submit button? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remix-forms.