How to use setValues with nested objects

[kevinG73]

I have the same structure that here and the same code

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

I added it :

// My code to add the new input's field
const addLine = () => {
  const lang: string = 'de';
  selectedLanguages.value.push(lang);

  resetForm({
    values: {
      area: values.area,
      translations: {
        ...values.translations,
        [lang]: {
          name: '',
          locale: lang,
        },
      },
    },
  });
  console.log(values);
};

I created another button to add new fields in my form but when i click on the button , setValues sets all fields values, but don't trigger validation for the changed fields.

demo : https://stackblitz.com/edit/vitejs-vite-eg965b?file=src%2FApp.vue

[logaretm]

That's because the schema isn't reactive. It doesn't contain the new key you added which is one of the downsides to represent your object like that.

You can use yup.lazy to create a lazy schema so it evaluates the keys each time:

yup.lazy(() =>
  yup.object({
    area: yup.number().required().positive().min(1000),
    translations: yup.object({
      ...selectedLanguages.value.reduce((acc, curr) => {
        acc[curr] = yup.object({
          id: yup.string().notRequired(),
          name: yup.string().required().max(30).min(2),
          locale: yup.string().required().max(2).min(2),
        });

        return acc;
      }, {}),
    }),
  })
);

https://stackblitz.com/edit/vitejs-vite-chv2ab?file=src%2FApp.vue

You can also use computed to create a reactive schema but it is unnecessary in that case.

[kevinG73]

thank you it works really clean