Open Faithfinder opened 1 year ago
we have support for arrays, would be good to add a docs page for it though. If you create a schema with .array()
you can have array values:
const StringArraySchema = z.string().array();
function StringArrayField() {
const {field: {onChange, value}} = useTsController<string[]>();
}
const mapping = [
[StringArraySchema, StringArrayField]
] as const
At least add examples for:
Any other ideas of examples we'd like to see with arrays?
Well, the case I was trying to implement is an array of objects (or, in other words, a table). So, no, not a string array. The schema looks roughly like this:
z.object({
data: z.object({
id: z.string(),
name: z.string(),
abbr: z.string(),
colour: z.string().nullable()
}).array()
})
(the top-level data
property is there because RHF doesn't support top-level arrays in useFieldArray
)
you can do that as well:
const RowSchema = z.object({
id: z.string(),
name: z.string(),
abbr: z.string(),
colour: z.string().nullable()
});
const TableSchema = ObjectSchema.array();
function MyTable() {
const {field: {value, onChange}} = useTsController<z.infer<typeof TableSchema>>();
}
const mapping = [
[TableSchema, MyTable],
] as const;
TBH I haven't used useFieldArray
for dynamic inputs in the past, is there something that's not possible with the above approach that is possible with useFieldArray
?
I guess the main motivation would be to make it easier to manipulate the dynamic inputs with things like "remove", "swap", etc? That could be done manually in the library currently, I think, but might be worth thinking about adding support for react hook forms APIs to make it easier
I see. Well, this approach makes me treat the row as a single value, which is not very ergonomic. I guess it's a different topic, but what I want, is for array and object type schemas to be associated with layout, and only ever use useTsController
with primitive values.
useFieldArray
is for DX, yes
@Faithfinder Ah I had a typo in my code, should've been typeof TableSchema
which would make it so the value is an array of rows. I updated it, sry about that
is for array and object type schemas to be associated with layout, and only ever use useTsController with primitive values.
if i understand you correctly this is now possible via the recursion feature #64
it might be a little more cleanly handled using this proposed FormFragment feature: #129
Couldn't find anything about dealing with arrays in the docs. I guess there needs to be native
useFieldArray
support?