How to use setFieldValue with nested objects?

[alex3025]

I want to use the setFieldValue method to set branding.name's value but it seems that I can't do that.

const { setFieldValue } = useForm({
  validationSchema: Yup.object({
    branding: Yup.object({
      name: Yup.string().required(),
    })
  )}
)}

<!-- This is a custom component -->
<InputField id="branding.name" />

How can I do that?

[logaretm]

Have you tried:

setFieldValue('branding.name', 'new val');

This should work as long the field is creating using useField or as long your InputField component calls it with its name/id. Feel free to provide a sample on codesandbox or stackblitz and I will take a look.

[alex3025]

If I use setFieldValue('branding.name') I get this error from VS Code:
Argument of type '"branding.name"' is not assignable to parameter of type 'keyof Settings'.ts(2345)

[logaretm]

At the moment vee-validate doesn't resolve all possible key paths for a nested form object as it is only possible with the newish template string types, I have yet to explore the opportunity with this feature.

But for the most part, you could cast the field name string to any for now or pass an interface of Record<string, any> to useForm (you will lose the object type if you do this.)