feat: added reset opts to force values closes #4440

Author: logaretm

.changeset/great-students-tie.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+feat: added reset opts to force values closes #4440

docs/src/pages/api/use-form.mdx

@@ -508,7 +508,7 @@ The number of submission attempts by the user, it increments whenever `submitFor
 
 <CodeTitle level="4">
 
-`resetForm: (state?: Partial<FormState>) => void`
+`resetForm: (state?: Partial<FormState>, opts?: ResetFormOpts) => void`
 
 </CodeTitle>
 
@@ -553,6 +553,20 @@ function onSubmit(values) {
 }
 ```
 
+By default `resetForm` merges the previous initial values with the new one provided, meaning only the provided ones will be overwritten. You can overwrite all the fields by passing `force: true` in the second argument.
+
+```js
+const { values, resetForm } = useForm({
+  initialValues: { fname: '123', lname: '456' },
+});
+
+// values: { fname: '123', lname: '456' }
+resetForm({ values: { fname: 'test' } });
+
+// values: { fname: 'test' }
+resetForm({ values: { fname: 'test' } }, { force: true });
+```
+
 <CodeTitle level="4">
 
 `handleReset: () => void`

packages/vee-validate/src/types/forms.ts

@@ -169,6 +169,10 @@ export interface FormState<TValues> {
 export type FormErrors<TValues extends GenericObject> = Partial<Record<Path<TValues>, string | undefined>>;
 export type FormErrorBag<TValues extends GenericObject> = Partial<Record<Path<TValues>, string[]>>;
 
+export interface ResetFormOpts {
+  force: boolean;
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export interface FormActions<TValues extends GenericObject, TOutput = TValues> {
   setFieldValue<T extends Path<TValues>>(field: T, value: PathValue<TValues, T>, shouldValidate?: boolean): void;
@@ -177,7 +181,7 @@ export interface FormActions<TValues extends GenericObject, TOutput = TValues> {
   setValues(fields: PartialDeep<TValues>, shouldValidate?: boolean): void;
   setFieldTouched(field: Path<TValues>, isTouched: boolean): void;
   setTouched(fields: Partial<Record<Path<TValues>, boolean>> | boolean): void;
-  resetForm(state?: Partial<FormState<TValues>>): void;
+  resetForm(state?: Partial<FormState<TValues>>, opts?: Partial<ResetFormOpts>): void;
   resetField(field: Path<TValues>, state?: Partial<FieldState>): void;
 }
 

packages/vee-validate/src/useForm.ts

@@ -50,6 +50,7 @@ import {
   ComponentBindsConfig,
   LazyInputBindsConfig,
   LazyComponentBindsConfig,
+  ResetFormOpts,
 } from './types';
 import {
   getFromPath,
@@ -631,6 +632,22 @@ export function useForm<
     }
   }
 
+  function forceSetValues(fields: PartialDeep<TValues>, shouldValidate = true) {
+    // clean up old values
+    keysOf(formValues).forEach(key => {
+      delete formValues[key];
+    });
+
+    // set up new values
+    keysOf(fields).forEach(path => {
+      setFieldValue(path as Path<TValues>, fields[path], false);
+    });
+
+    if (shouldValidate) {
+      validate();
+    }
+  }
+
   /**
    * Sets multiple fields values
    */
@@ -726,7 +743,7 @@ export function useForm<
   /**
    * Resets all fields
    */
-  function resetForm(resetState?: Partial<FormState<TValues>>) {
+  function resetForm(resetState?: Partial<FormState<TValues>>, opts?: ResetFormOpts) {
     let newValues = resetState?.values ? resetState.values : originalInitialValues.value;
     newValues = isTypedSchema(schema) && isCallable(schema.cast) ? schema.cast(newValues) : newValues;
     setInitialValues(newValues);
@@ -737,8 +754,8 @@ export function useForm<
       setFieldValue(state.path as Path<TValues>, getFromPath(newValues, state.path), false);
       setFieldError(state.path as Path<TValues>, undefined);
     });
-    setValues(newValues, false);
 
+    opts?.force ? forceSetValues(newValues, false) : setValues(newValues, false);
     setErrors(resetState?.errors || {});
     submitCount.value = resetState?.submitCount || 0;
     nextTick(() => {

packages/vee-validate/tests/useForm.spec.ts

@@ -1349,4 +1349,27 @@ describe('useForm()', () => {
     expect(form.errors.value.fname).toBe(undefined);
     expect(form.errors.value.lname).toBe(undefined);
   });
+
+  test('values can be reset to specifically only include the provided fields', async () => {
+    let form!: FormContext<{ fname: string; lname: string }>;
+
+    mountWithHoc({
+      setup() {
+        form = useForm({
+          initialValues: { fname: '123', lname: '456' },
+        });
+
+        return {};
+      },
+      template: `
+        <div></div>
+      `,
+    });
+
+    await flushPromises();
+
+    form.resetForm({ values: { fname: 'test' } }, { force: true });
+    expect(form.values.lname).toBeUndefined();
+    expect(form.values.fname).toBe('test');
+  });
 });