Nested Object validation show Errors

[Delari]

i am trying to validate a nested object, however i have a problem with displaying an error

I made an example according to the documentation docs
but when i try add

:has-error="Boolean(formErrors.links?.twitter)"

i have error

Property 'twitter' does not exist on type 'string'

that my full component

<script setup lang="ts">
import { Field, useField, useForm } from 'vee-validate';
import { ref } from 'vue';
import * as yup from 'yup'

// const { value: name } = useField('name')
// const { value: twitter } = useField('links.twitter');
// const { value: github } = useField('links.github');

const { values: fieldValues, errors: formErrors, handleSubmit } = useForm({
  initialValues: {
    name: '',
    links: {
      twitter: null,
      github: null,
    },
  },
  validationSchema: yup.object({
    name: yup.string().required(),
    links: yup.object({
      twitter: yup.string().required().nullable(),
      github: yup.string().required().nullable(),
    })
  })
})
const onSubmit = handleSubmit(values => {
  alert(JSON.stringify(values, null, 2));
});

const loading = ref(false)

</script>


<template>
  <div class="blog-detail-wrapper">
    <VLoader card="regular" size="small" :active="loading" translucent>
      <VCard radius="smooth" class="demo-table mb-6">
        <form @submit="onSubmit">
          <Field v-slot="{ field, errors }" name="name" type="text">
            <VField label="name">
              <VControl icon="feather:edit-2" :has-error="Boolean(formErrors.name)">
                <input
                  v-bind="field"
                  class="input is-primary-focus"
                  type="text"
                  placeholder="imagesLtr"
                  autocomplete="name"
                />
                <p v-if="errors" class="help is-danger">{{ formErrors.name }}</p>
              </VControl>
            </VField>
          </Field>
          <Field v-slot="{ field, errors }" name="links.twitter" type="text">
            <VField label="links.twitter">
              <VControl icon="feather:edit-2" :has-error="Boolean(formErrors.links?.twitter)">
                <input
                  v-bind="field"
                  class="input is-primary-focus"
                  type="text"
                  placeholder="Name"
                  autocomplete="twitter"
                />
              <p v-if="errors" class="help is-danger">{{ formErrors.links?.twitter }}</p>
              </VControl>
            </VField>
          </Field>
          <Field v-slot="{ field, errors }" name="links.github" type="text">
            <VField label="links.github">
              <VControl icon="feather:edit-2">
                <input
                  v-bind="field"
                  class="input is-primary-focus"
                  type="text"
                  placeholder="Name"
                  autocomplete="github"
                />
              </VControl>
            </VField>
          </Field>
          <button>Submit</button>
        </form>
      </VCard>
    </VLoader>
  </div>
</template>

[logaretm]

Errors are not nested, only the values are. The errors object is flat So if you want to display errors for that input you will need to access it this way:

formErrors['links.twitter']

[Delari]

Errors are not nested, only the values are. The errors object is flat So if you want to display errors for that input you will need to access it this way:

formErrors['links.twitter']

i try this but have this error

Element implicitly has an 'any' type because expression of type '"links.twitter"' can't be used to index type 'Partial<Record<"name" | "links", string | undefined>>'.
  Property 'links.twitter' does not exist on type 'Partial<Record<"name" | "links", string | undefined>>'.ts(7053)

https://ibb.co/MVwwWSw

[logaretm]

This is because at the moment the vee-validate types do not support nested paths as it would be complex to support but I think it should be possible with template string types, I have yet to explore this possibility.

For now either cast the field key to any or use Record<string, unknown> for your form type.