How can we use useFieldArray for one particular field from a set of schema.

[nishantkhandelwal]

Hello @bluebill1049 ,

There is a use case that I am struggling with in my project where we have a page that collects firstname(string), lastname(string), addresses(array of object and dynamic).
On this page user can add/remove addresses.
I have defined a schema for the page that looks like
{
firstName: string,
lastName: string,
address: {
postcode: string,
country: string
}
}

on the page I want to use useFieldArray for the address field only. How can I pass the control specific to the address field to the useFieldArray.
Or is there any other way for dealing the complex form pages like this ?

Thanks,

[Moshyfawn]

Consider providing a codesanbox example to expand on what you want to achieve.

All RHF hooks expect the control from use useForm. There's no concept of partial or field specific control

[Moshyfawn]

useFieldArray works only with arrays. So, yes, the value produced by inputs "attached" to useFieldArray will produce an array of values.

If your address field is an object, then useFieldArray is not the right tool to work with it. But you specifically mentioned

addresses(array of object and dynamic)

So, I'm a bit confused :P

[nishantkhandelwal]

Sorry for not making it clear.:(
As per my understanding whatever control I am passing to the useFieldArray it will convert them into array. in my case if I pass firstName, lastName, and address are on the same page. I have a form which get all these details from the user.

const methods = useForm({
defaultValues: {
firstName: '',
middleName: '',
addresses: []
},
mode: 'onBlur',
resolver: yupResolver(
firstName: string().required()
lastName: string().required()
address: object.shape({postcode: string(),
country: string()}
)),
});

I want to convert the address field ONLY in the array so that user can enter multiple addresses.
How can I achieve this keeping firstname and lastname as string field only.

[Moshyfawn]

Sorry for not making it clear.:(

I just saw the interface you've provided in the initial description where the address field is of type object ;)

{
  firstName: string,
  lastName: string,
  address: {
    postcode: string,
    country: string
  }
}

I think I know where you have some RHF knowledge issue. I'll make an assumption and you can tell me if it's not what you meant.

Passing the control in whatever RHF hook on it's own does nothing to your form values. It's needed to store all the related information about your form and the hooks will make use of it to get or set some form state.

useFieldArray takes in a name prop, which should be the field's name which is an array of object shaped values. So, you should provide the control and the name prop (in your case it's addresses) to be able to update / add / remove the addresses and only the addresses.

So,

const { fields } = useFieldArray({ control, name: "addresses" })

will only provide you the methods to manipulate your addresses field, nothing else.

[Moshyfawn]

That said, your addresses schema, in this case, should be an array and not an object.
So, something like

addresses: array().of(
  object().shape({
    postcode: string(),
    country: string(),
  })
)

[nishantkhandelwal]

@Moshyfawn - Thanks so much. Yeah, I think this should solve my issue. Trying it now.
Thanks much for your swift response.

Thanks,