How do we reset the size of a field array when we reset the form?

[netervati]

I've been trying to reset the size of a field array to its original size after resetting the form, but so far, I have not been successful. I've also tried reading the docs, and I'm just not able to find an answer to my problem.

For context, I'm using the nuxt module for vee-validate:

"@vee-validate/nuxt": "^4.8.6",

And I'm not sure if this is useful information, but the form is located in a modal component, which is rendered inside the <ClientOnly /> tag. This is what I've tried so far:

const defaultUser = { id: 1, name: 'John Doe' };

const form = useForm({
  initialValues: {
    users: [defaultUser]
  }
});

const { remove, push, fields } = useFieldArray('users'); 

// ======
// Attempt 1
const handleReset = () => {
  form.resetForm();
};

// ======
// Attempt 2
const handleReset = () => {
  form.setFieldValue('users', [defaultUser]);
  form.resetForm();
};

// ======
// Attempt 3
const handleReset = () => {
  form.resetForm({
    values: {
      users: [defaultUser].
    }
  });
};

// ======
// Attempt 4
const handleReset = () => {
  form.resetForm(
    {
      values: {
        users: [defaultUser].
      }
    },
    // Getting TS error with this one
    // Expected 0-1 arguments, but got 2.
    { force: true }
  )
};

// ======
// Attempt 5
const handleReset = () => {
  for (let i = 0; i < fields.value.length; i++) {
    remove(i);
  }

  push(defaultSchema);
  form.resetForm();
};

All of these attempts yield the same result. They only clear the field values, but they don't reset the array size. How do I address this problem?

[logaretm]

This might be a bug, form.resetForm() should reset the values. However it is possible that the field array logic overrides the initial values.

Alternatively you could try to pass in the force option:

  form.resetForm({ values: myValues }, { force: true });

I will investigate this, but I believe we have a test for it already which is weird.

[netervati]

@logaretm Thank you for your response!

Is this a new feature? Because I've already tried that, but I'm only getting this TS error:

Expected 0-1 arguments, but got 2.ts(2554)
(property) force: boolean

and when I test it, it doesn't reset the array size. I did find a workaround by re-rendering my form component using the :key prop so I can force reset the form state. It does the job but, I'm hoping that later I can rely on resetForm instead.

I'll try to make a minimal reproducible example in StackBlitz later. For now, I've updated the question to include more details 🙏🏻