Array support about react-ts-form HOT 6 OPEN

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:

• Dynamic text input array (allowing users to add and remove text fields)

Any other ideas of examples we'd like to see with arrays?

from react-ts-form.

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)

from react-ts-form.

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

from react-ts-form.

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

from react-ts-form.

@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

from react-ts-form.

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

from react-ts-form.