Reset of dirty flag on field level not possible?

[chris-si]

Hey,

I am kind of having a similar problem as in #1821 at the moment with vee-validate v4.7.3.
I have a component which has to generate some data client-side in the onMounted lifecycle hook since it is server-side rendered but that causes the form field to be dirty right after loading the data.

I tried calling the formField.resetField(), in the hopes that it might reset the field validation but it doesn't set the field's dirty flag back to false and I'm also unaware of any possibility to override the initial field value at the field level.

My code looks something like this:

<script setup lang="ts">
const data = ref<SomeObjectType[]>([])
// ...
const formField = reactive(useField(props.name, undefined, { initialValue: props.initialValue }));

watch(data, (newData) => {
    formField.setValue(newData);
  }, { deep: true }
);

onMounted(() => {
  data.value.map(async (data) => {
    // this data mutation leads to the form field being flagged as dirty
    file.moreData = await generateSomeMoreData()
  });

  // here would be the place to reset the validation or override the dirty flag
});
</script>

Is there any other method I'm currently missing that could do this or is it simply not possible at the moment the way I'd like to do it?

I already read that it would be possible to reset the validation at the form level, but that would unfortunately be a 'not so nice' workaround in my use case since form and field are different components.

[logaretm]

Actually resetField should work here and we have a test for it. Unless the equality check is failing somehow for dirty calculation. Do you mind creating a sample? I can then take a look.

[chris-si]

I just started creating a sample project when I found a little bug on my side. The resetField method works just fine if it's used the right way. I accidentally missed awaiting the promises from the map function and consequently the field was reset before all data is loaded.