how to validate fields with nested objects in vue 3 with composition api

[kevinG73]

Hello ,
I guess that this question has been posted already maybe , but i don't know there aren't so examples with composition API and typescript , I have this structure :

export interface IContinentTranslation {
    area:number,
    [lang: string]: {
        id?: string | null;
        name: string;
        locale: string;
    }
}

my template html

<template>
 <div class="mt-2">
          <div>
            <div class="mb-2">
              <span class="form-label">Translation of names *</span>
            </div>
            <div class="max-h-56 overflow-y-auto ">
              <div class="flex items-start gap-5 mb-5" v-for="selectedLanguage in selectedLanguages"
                   :key="selectedLanguage">
                <div class="flex items-center w-2/3">
                  <div class="flex items-center w-full">
                    <input v-model="translations[selectedLanguage].name" type="text" id="title" class="form-input mr-2"
                           placeholder="Name"
                           required>
                  </div>
                  <small>{{ errors }}</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
</template>

my script :

const selectedLanguages = ref<string[]>(['en']);
const initialValues = {
  area:0,
  translations: {
    'en': {
      name: '',
      locale: 'en'
    }
  }
}


const {errors} = useForm({
  validationSchema: {
    area: yup.number().required().positive().min(1000),
    translations: yup.lazy(value => {
      if (value !== undefined) {
        return yup.object().shape({
          id: yup.string().notRequired(),
          name: yup.string().required().max(30).min(2),
          locale: yup.string().required().max(2).min(2),
        });
      }
      return yup.mixed().required();
    }),
  },
  initialValues,
})

const {value: area, errorMessage: areaError} = useField<number>("area");
const {value: translations} = useField<IContinentTranslation>("translations");

but i don't why it doesn't work , it doesn't shiow errors about fields
someone could help with any hints ?

[logaretm]

You need to use yup.object to define the schema.

const {errors} = useForm({
  validationSchema: yup.object({
    area: yup.number().required().positive().min(1000),
    translations: yup.lazy(value => {
      if (value !== undefined) {
        return yup.object().shape({
          id: yup.string().notRequired(),
          name: yup.string().required().max(30).min(2),
          locale: yup.string().required().max(2).min(2),
        });
      }
      return yup.mixed().required();
    }),
  }),
  initialValues,
})

If the problem persists, please create an example on stackblitz.

[logaretm]

I have no idea since the example I posted above works as expected and seems to be fully reactive. Can you create another one with the specific issue happening?

[kevinG73]

@logaretm It's fully reactive except when validation trigger don't work with all fields , have you checked it ?

[logaretm]

Yes, it works on my end just fine. Can you try the latest version of vee-validate? 4.6.4 fixed a bug that seems to be the same in your video. So try the latest version and let me know.

[logaretm]

Here is a video of how it works against the latest release:

CleanShot.2022-08-13.at.16.36.07.mp4

[kevinG73]

Here is a video of how it works against the latest release:

CleanShot.2022-08-13.at.16.36.07.mp4

it works now 4.6.4 thank you

[kevinG73]

[logaretm]

Not sure I understand the issue. If you are talking about the error message being shown initially then that's expected because model validation do not have validation triggers.

Otherwise, you would need to create custom input components with useField or <Field /> instead.

If that's not the problem then feel free to clarify or provide an example of this issue and I will take a look.