Adding to existing object array dynamically (not example in dynamic arrays)

[jgustavoj]

I have a bit of a complex form im building with form composition. But the hurdle im getting to now is that I want to add to an existing object array without creating a new one, example:

This is the schema:

const hobbySchema = z.object({
  type: z.literal('Hobby'),
  hobbyValue: z.array(z.string()),
})

hobby: z.array(hobbySchema).optional(),

My form has a + Add Hobby button to pushValue to array, following docs examples.

the final result I want is this:

hobby: [{
type: 'Hobby', // this is a literal string. 
hobbyValue: ['run', 'swim', 'climb']
}]

But I'm getting something like this:

hobby: [
{
type: 'Hobby',
hobbyValue: ['run']
},
{
type: 'Hobby',
hobbyValue: [' ' , 'swim']
},
{
type: 'Hobby',
hobbyValue: [' ', 'c', ' climb']
}]

I am using <form.AppField/> to then use my reusable inputs fields I've created. This works fine with other types of data. But can't seem to get it working with this array of strings in an object scenario.

Thank you to anyone that can help!

[LeCarbonator]

Do you have a snippet of code you could share? How are you calling pushValue?

What is likely happening is that you wish to push not to the array of hobby, but to a specific Hobby's values

In that case, you need access to the hobbyValue instead of the main array.

- field: 'hobby'
+ field: 'hobby[i].hobbyValue', where i is the index of the desired hobby

Array fields can help you access exactly the hobby you want. Consider reading this section of the documentation.