Setting Vee-Validate initial value from API

[prochazka-storymkrs]

Hi,

I'm trying to use Vee-Validate and I'm struggling with using initial values loaded from API and getting the value whether the form is dirty or not.

<script setup lang="ts">
const model: Ref<Company | any> = ref({})

const { handleSubmit, errors, meta } = useForm({
    validationSchema: {
      name: yup.string().required("Name is required")
    },
    initialValues: model
  })

const handleCompanyOverviewSave = handleSubmit(async (form: any) => {
  console.log(meta.value.dirty) // here it is always true
})

onMounted(async () => {
  const api = useApi()
  model.value = (await api.get(`/companies/${store.currentCompany.id}`)).data
})
</script>

The thing is, when I use a simple object like { name: "test" } as the initial value, the meta.dirty is really true only when I change the field.
But when I use the model loaded from the API and assign it to the ref object, it is becoming dirty by the assignment itself - I understand that.

But what is the correct way to set initial values to the useForm from API?

Thanks

[logaretm]

You should use resetForm to assign initial values:

const { handleSubmit, errors, meta, resetForm } = useForm({
  // ....
});

onMounted(async () => {
  const api = useApi()
  const { data } = (await api.get(`/companies/${store.currentCompany.id}`));

  resetForm({ values: data });
})

resetForm does two things:

• Sets the current form values
• Sets the initial form values

Which means dirty would be false since the initial values match the current ones.

[sschneider-ihre-pvs]

I would if I could, I also have idea what stuff is colliding it seems to be only a nested object in the result that is causing trouble but I cannot figure out why.

[logaretm]

I'm suspecting that the data isn't a JSON and is some form of a Vue ref or something, or contains one. Maybe using toRaw from vue can unwrap it for you if that's the case.

[sschneider-ihre-pvs]

I guess I found the error, the value should actually pre select a dropdown, which expects a list of objects as options, and I only provide a single one. guess that will make it difficult.

[sschneider-ihre-pvs]

ok, I didn't found the error. @logaretm

 if (!isEqual(a[key], b[key]))
                return false;

As soon as b[key] is tried to access, I immediately get the error:
Uncaught TypeError: proxy must report the same value for the non-writable, non-configurable property
isEqual is not even executed.

[sschneider-ihre-pvs]

it seems to work with setValues, but I do not know what the difference is

[dignityinside]

I try to solve similar task, but in my case i store the data from the API in Pinia Store and use the data later.

By itself it works, but it is not reactive (as I understand). Only after a reload the page, the correct data is displayed.

onMounted(async () => {
  await getBoards(); // fetch data from the API and store in Pinia

  const board = computed(() => boardStore.getBoardById(boardStore.activeBoardId)); // I think something is wrong here

  resetForm({
    values: {
      name: board.value.name,
    },
  });
});

Maybe I will find the bug myself later, but if someone has an idea, gladly :-)

[1nusah]

Heyyy @dignityinside did you find a way around this, i'm facing the same thing and it's killing me. Correct data only shows after page reload

[dignityinside]

I found a solution, maybe not the best one, but it's work:

onMounted(async () => {
  await getBoards(); // fetch data from the API and store in Pinia

  setBoardName();
});

watch(
  () => boardStore.activeBoardId,
  () => setBoardName()
);

const setBoardName = () => {
  const board = computed(() => boardStore.getBoardById(boardStore.activeBoardId));

  resetForm({
    values: {
      name: board.value.name,
    },
  });
};