Unable to change form's initialValues back to empty object with resetForm force: true

[NikoGJ]

What happened?

Hello,

The resetForm function allows to resetting a form's meta fields, also providing new initial values.
There is an edge-case when the new initial values provided are an empty object {}. The form.meta.initial simply isn't reflected, it stays to the previous value is has.
I'm using explicitely { force: true } to tell vee-validate not to merge the values passed with the existing, but to replace them, doesn't work nonetheless.

Looking at the source code, it looks like it is in setInitialValues that the update of these fields are done.

Reproduction steps

const form = useForm();
// form.meta.initial = {}

// Some code that resets the form with a new context (i.e. a new set of initial values)
form.resetForm({ values: { name: '', age: 0 }}, { force: true })

// form.meta.initial = { name: '', age: 0 }

form.resetForm({ values: {} }, { force: true })
// Nothing has changed, form.meta.initial = { name: '', age: 0 }

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

See above

Code of Conduct

• I agree to follow this project's Code of Conduct

[NikoGJ]

Actually, to be more specific, the problem is that you can't force set some or all of the initialValues to undefined, unless you explicitely define them as 'undefined'. Omitting them is just not enough. This can be problematic for some generic use-cases, where you don't/can't construct an object with all of its properties to undefined, but would rather pass a empty object {} to reset initial values.

I made a test example:

  test('reset should be able to set initial values to undefined with force: true', async () => {
    let form!: FormContext<{ lname: string; fname: string }>;

    mountWithHoc({
      setup() {
        form = useForm({
          initialValues: { fname: '123', lname: '456' },
        });
        return {};
      },
      template: `<div></div>`,
    });

    await flushPromises();

    // FAIL
    form.resetForm({ values: { lname: '789' } }, { force: true });
    expect(form.meta.value.initialValues?.fname).toBeUndefined(); // This is not undefined. It stayed at value '123'
    expect(form.meta.value.initialValues?.lname).toBe('789');

    // FAIL
    form.resetForm({ values: {} }, { force: true });
    expect(form.meta.value.initialValues?.fname).toBeUndefined();
    expect(form.meta.value.initialValues?.lname).toBeUndefined();

    // PASS
    form.resetForm({ values: { lname: undefined, fname: undefined } }, { force: true });
    expect(form.meta.value.initialValues?.fname).toBeUndefined();
    expect(form.meta.value.initialValues?.lname).toBeUndefined();
  });