@teamnovu/kit-vue-forms 0.2.16 → 0.2.18

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.18] - 2025-03-03
+
+### Fixed
+
+- Correctly pass `validationState` to subForm creation instead of `formOptions`
+- Fix build error through type on `FormFieldWrapper`
+
+## [0.2.17] - 2025-01-22
+
+### Fixed
+
+- `keepValuesOnUnmount` was `false` instead of `true` by default
+
+## [0.1.27] - 2025-01-22
+
+### Fixed
+
+- `keepValuesOnUnmount` was `false` instead of `true` by default

package/dist/components/FormFieldWrapper.vue.d.ts

@@ -12,9 +12,7 @@ declare const _default: <TData extends FormDataDefault, TPath extends Paths<TDat
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, never> & FormFieldWrapperProps<TData, TPath, TComponent, TDataOut> & Partial<{}>> & PublicProps;
     expose(exposed: ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: Partial<Record<number, (_: any) => any>> & {
-        default?(_: {}): any;
-    };
+    slots: Readonly<Record<string, (props: any) => any>> & Record<string, (props: any) => any>;
     emit: {};
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/composables/useSubform.d.ts

@@ -1,6 +1,6 @@
 import { Form, FormDataDefault } from '../types/form';
 import { EntityPaths, PickEntity } from '../types/util';
-import { UseFormOptions } from './useForm';
+import { ValidationState } from './useValidation';
 export interface SubformOptions<_T extends FormDataDefault> {
 }
-export declare function createSubformInterface<T extends FormDataDefault, K extends EntityPaths<T>, TOut = T>(mainForm: Form<T, TOut>, path: K, formOptions?: UseFormOptions<T, TOut>, _options?: SubformOptions<PickEntity<T, K>>): Form<PickEntity<T, K>, PickEntity<TOut, K>>;
+export declare function createSubformInterface<T extends FormDataDefault, K extends EntityPaths<T>, TOut = T>(mainForm: Form<T, TOut>, path: K, validationState: ValidationState<T, TOut>, _options?: SubformOptions<PickEntity<T, K>>): Form<PickEntity<T, K>, PickEntity<TOut, K>>;

package/dist/index.js

@@ -3,7 +3,6 @@ var re = (r, t, e) => t in r ? te(r, t, { enumerable: !0, configurable: !0, writ
 var P = (r, t, e) => re(r, typeof t != "symbol" ? t + "" : t, e);
 import { toValue as J, toRaw as ae, shallowRef as O, watch as b, computed as m, unref as h, isRef as x, reactive as A, toRefs as G, shallowReactive as se, toRef as U, onScopeDispose as ne, triggerRef as ie, ref as Z, getCurrentScope as oe, onBeforeUnmount as le, defineComponent as N, renderSlot as C, normalizeProps as T, guardReactiveProps as W, createBlock as K, openBlock as L, withCtx as M, resolveDynamicComponent as ue, mergeProps as ce, createSlots as de, renderList as fe } from "vue";
 import { cloneDeep as he, merge as ve, omit as me } from "lodash-es";
-import "zod";
 function D(r) {
   const t = J(r), e = ae(t);
   return he(e);
@@ -290,7 +289,7 @@ function Pe(r, t, e) {
     s.set(o, i);
   }, v = (i) => {
     var o;
-    n != null && n.keepValuesOnUnmount || (o = s.get(i)) == null || o.reset(), s.delete(i);
+    h((n == null ? void 0 : n.keepValuesOnUnmount) ?? !0) || (o = s.get(i)) == null || o.reset(), s.delete(i);
   }, y = (i) => {
     var o;
     a.has(i) ? (o = a.get(i)) == null || o.inc() : a.set(i, new Re(() => v(i)));
@@ -359,13 +358,16 @@ function $e(r) {
   };
 }
 function Ie(r) {
-  const t = r.issues.filter((a) => a.path.length === 0).map((a) => a.message), e = r.issues.filter((a) => a.path.length > 0).reduce((a, s) => {
-    const n = s.path.join(".");
-    return {
-      ...a,
-      [n]: [...a[n] ?? [], s.message]
-    };
-  }, {});
+  const t = r.issues.filter((a) => a.path.length === 0).map((a) => a.message), e = r.issues.filter((a) => a.path.length > 0).reduce(
+    (a, s) => {
+      const n = s.path.join(".");
+      return {
+        ...a,
+        [n]: [...a[n] ?? [], s.message]
+      };
+    },
+    {}
+  );
   return {
     general: t,
     propertyErrors: e
@@ -450,10 +452,12 @@ class Be {
   }
 }
 function _(r) {
-  return m(() => new Be(
-    h(r.schema),
-    h(r.validateFn)
-  ));
+  return m(
+    () => new Be(
+      h(r.schema),
+      h(r.validateFn)
+    )
+  );
 }
 function ke(r, t) {
   const e = A({
@@ -461,15 +465,22 @@ function ke(r, t) {
     isValidated: !1,
     errors: h(t.errors) ?? w.errors
   }), a = (i = w.errors) => {
-    e.errors = j(h(t.errors) ?? w.errors, i);
+    e.errors = j(
+      h(t.errors) ?? w.errors,
+      i
+    );
   };
-  b(() => h(t.errors), async () => {
-    if (e.isValidated) {
-      const i = await n();
-      a(i.errors);
-    } else
-      a();
-  }, { immediate: !0 }), b(
+  b(
+    () => h(t.errors),
+    async () => {
+      if (e.isValidated) {
+        const i = await n();
+        a(i.errors);
+      } else
+        a();
+    },
+    { immediate: !0 }
+  ), b(
     [() => e.validators],
     async (i) => {
       if (e.isValidated)
@@ -485,7 +496,9 @@ function ke(r, t) {
   });
   const s = (i) => {
     const o = x(i) ? i : _(i);
-    return e.validators.push(o), oe() && le(() => {
+    return e.validators.push(
+      o
+    ), oe() && le(() => {
       e.validators = e.validators.filter(
         (f) => f !== o
       );
@@ -613,7 +626,7 @@ function Ue(r, t, e, a) {
         p
       );
     },
-    submitHandler: (u) => X(k, e ?? {})(u),
+    submitHandler: (u) => X(k, e)(u),
     getFieldArray: (u, p) => Y(k, u, p)
   };
   return k;
@@ -622,7 +635,7 @@ const je = {
   keepValuesOnUnmount: !0,
   ...Oe
 };
-function ze(r) {
+function We(r) {
   r = ve({}, je, r);
   const t = m(() => D(r.initialData)), e = Z(D(t)), a = A({
     initialData: t,
@@ -661,7 +674,7 @@ function ze(r) {
     data: U(a, "data"),
     validateForm: s.validateForm,
     submitHandler: (l) => X(y, s)(l),
-    getSubForm: (l, d) => Ue(y, l, r),
+    getSubForm: (l, d) => Ue(y, l, s),
     getFieldArray: (l, d) => Y(y, l, d)
   };
   return y;
@@ -685,7 +698,7 @@ const _e = /* @__PURE__ */ N({
     }), a = A(e);
     return (s, n) => C(s.$slots, "default", T(W(a)));
   }
-}), He = /* @__PURE__ */ N({
+}), ze = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -724,7 +737,7 @@ const _e = /* @__PURE__ */ N({
       _: 3
     }, 8, ["form", "path"]));
   }
-}), Ke = /* @__PURE__ */ N({
+}), He = /* @__PURE__ */ N({
   __name: "FormPart",
   props: {
     form: {},
@@ -737,7 +750,7 @@ const _e = /* @__PURE__ */ N({
 });
 export {
   _e as Field,
-  He as FormFieldWrapper,
-  Ke as FormPart,
-  ze as useForm
+  ze as FormFieldWrapper,
+  He as FormPart,
+  We as useForm
 };

package/dist/utils/submitHandler.d.ts

@@ -1,4 +1,4 @@
 import { Awaitable } from '@vueuse/core';
 import { ValidationState } from '../composables/useValidation';
 import { Form, FormDataDefault } from '../types/form';
-export declare function makeSubmitHandler<T extends FormDataDefault, TOut = T>(form: Form<T, TOut>, validationState: ValidationState<T, TOut>): (onSubmit: (data: TOut) => Awaitable<void>) => (event?: SubmitEvent) => Promise<void>;
+export declare function makeSubmitHandler<T extends FormDataDefault, TOut = T>(form: Form<T, TOut>, validationState: Pick<ValidationState<T, TOut>, 'canValidate'>): (onSubmit: (data: TOut) => Awaitable<void>) => (event?: SubmitEvent) => Promise<void>;

package/docs/FormInput-example.md

@@ -16,43 +16,54 @@ In the example below we use a text field `TextField.vue`.
 
 Example:
 ```vue
-<!-- FormTextInput.vue -->
+<!-- FormTextField.vue -->
 <template>
   <FormFieldWrapper
     :component="TextField"
-    :component-props="$props"
-    :path="path"
+    :component-props="omit($props, 'form', 'path')"
     :form="form"
-  />
+    :path="path"
+  >
+    <slot />
+    <!-- https://vue-land.github.io/faq/forwarding-slots#passing-all-slots -->
+    <template
+      v-for="(_, slotName) in $slots"
+      #[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps ?? {}" />
+    </template>
+  </FormFieldWrapper>
 </template>
 
-<script setup lang="ts" generic="TData extends object, TPath extends Paths<TData>">
-import type { TextFieldProps } from '#components/utils/form/plainInput/TextField.vue';
-import TextField from '#components/utils/form/plainInput/TextField.vue';
-import { type Paths, FormFieldWrapper } from '@teamnovu/kit-vue-forms';
-import type {
-  ExcludedFieldProps,
-  FormComponentProps,
-} from '#types/form/FormComponentProps';
+<script setup lang="ts" generic="TData extends object, TPath extends Paths<TData>, TDataOut = TData">
+import TextField, { type TextFieldProps } from '#components/utils/form/plainInput/TextField.vue'
+import { FormFieldWrapper, type ExcludedFieldProps, type FormComponentProps, type Paths } from '@teamnovu/kit-vue-forms'
+import { omit } from 'lodash-es'
 
-export type Props<TData extends object, TPath extends Paths<TData>> =
-  FormComponentProps<TData, TPath, TextFieldProps['modelValue']> & Omit<TextFieldProps, ExcludedFieldProps>;
+export type Props<
+  TData extends object,
+  TPath extends Paths<TData>,
+  TDataOut = TData,
+> = FormComponentProps<TData, TPath, TextFieldProps['modelValue'], TDataOut> & Omit<TextFieldProps, ExcludedFieldProps>
 
-defineProps<Props<TData, TPath>>();
+defineProps<Props<TData, TPath, TDataOut>>()
 </script>
 ```
-Note the usage of the generic types `TData` and `TPath` to make the component fully type-safe. With this, the `path` prop
+Note the usage of the generic types `TData`, `TPath`, and `TDataOut` to make the component fully type-safe. With this, the `path` prop
 will only allow valid paths of the form data. Moreover, it will throw a type error if the property at `path` of the `form`
 has the wrong type. This is ensured by using the `FormComponentProps` type above.
 
+The `omit($props, 'form', 'path')` ensures that only the underlying component's props are passed through.
+The slot forwarding pattern allows slots defined on the form input to be passed to the underlying plain input component.
+
 The usage of such a form input component is as follows (assuming the input should handle the "firstName" property of the form data):
 ```vue
-<FormTextInput 
+<FormTextField
   :form="form"
   path="firstName"
 />
 ```
-Here, `form` is the Form component that was created with [`useForm`](index.md#useform). All additional props are passed
+Here, `form` is the form object that was created with [`useForm`](./reference.md#composable-useform). All additional props are passed
 to the underlying plain input component, e.g. `label`, `placeholder`, etc.
 
 It is recommended to use this pattern of a styled "plain input" that works with v-model and a "form input" to work with form

package/docs/example.md

@@ -20,7 +20,7 @@ We can create a form like this:
 
 ```vue
 <template>
-  <form @submit.prevent="submit">
+  <form @submit="form.submitHandler(sendToBackend)">
     <!-- Simple form inputs -->
     <!-- the "label" prop is passed through the FormTextField to the underlying TextField -->
     <FormTextField
@@ -56,13 +56,15 @@ We can create a form like this:
       <FormAddressField :form="subform" />
     </FormPart>
 
-    <div v-for="(_, index) in unref(form.data).person.hobbies" :key="index" class="ml-4">
-      <!-- Note the path format of an array item. You just use the index number in the dot-path -->
+    <!-- Using getFieldArray for dynamic lists with add/remove functionality -->
+    <div v-for="field in hobbies.items.value" :key="field.id" class="ml-4">
       <FormTextField
           :form="form"
-          :path="`person.hobbies.${index}`"
+          :path="field.path"
       />
+      <button type="button" @click="hobbies.remove(field.id)">Remove</button>
     </div>
+    <button type="button" @click="hobbies.push('')">Add Hobby</button>
 
     <button type="button" @click="toggleComment">
       Toggle Comment
@@ -151,20 +153,12 @@ const form = useForm<{ // this type might be inferred automatically from the ini
   }),
 });
 
-const sendToBackend = async (data) => {
-  // send data object to backend
-};
-
-const submit = async () => {
-  // validate the form
-  // if the zod schema is not satisfied, isValid will be false and the errors will be set on the corresponding fields
-  // if your TextInput component handles errors correctly, it should be directly visible
-  const { isValid } = await form.validateForm();
+// getFieldArray for managing the hobbies list
+const hobbies = form.getFieldArray('person.hobbies');
 
-  // only submit if the form is valid
-  if (isValid) {
-    await sendToBackend(unref(form.data));
-  }
+const sendToBackend = async (data) => {
+  // send validated data object to backend
+  // note: data is the validated/transformed output type (TOut)
 };
 
 // To programmatically change form values, use form.getField to get a ref and a setter function

package/docs/index.md

@@ -16,9 +16,10 @@ but pass it down as a prop to guarantee type safety.
 ## Usage
 
 1. Wrap your plain input components into `FormFieldWrapper`, see [FormInput Example](./FormInput-example.md).
-2. Inside your parent component where you want to use a form, use the composable `useForm` to create a form object. 
-This object contains the form data, errors, and methods to define
-fields, validate the form, reset it, and create subforms for nested objects or arrays, see [here](./reference#composable-useform).
+2. Inside your parent component where you want to use a form, use the composable `useForm` to create a form object.
+This object contains the form data, errors, and methods to define fields, validate the form, reset it,
+create subforms for nested objects, and manage dynamic lists with `getFieldArray`.
+Use `submitHandler` for form submission with automatic validation, see [here](./reference#composable-useform).
 3. Pass this form object to any form input component together with a path to the property of the form data that this input
 should manage. You can also make subforms, pass the form down to child components, etc. See the examples for inspiration.
 4. See Reference documentation for all types and methods: [here](./reference.md).

package/docs/reference.md

@@ -2,35 +2,53 @@
 ## Composable `useForm`
 This is the main composable which creates the form. It has the following signature:
 ```typescript
-function useForm<T extends object>(options: {
+function useForm<T extends object, TOut = T>(options: {
   // the initial data of the form
   // reactive changes to this object will propagate to the form data
   initialData: MaybeRefOrGetter<T>
   // an ErrorBag object or ref of an ErrorBag object with external errors
   // this is used e.g. for server side validation errors
-  // these errors will be merged with the internal errors of the form based on validationFn below and/or the zod schema
+  // these errors will be merged with the internal errors of the form based on validateFn below and/or the zod schema
   errors?: MaybeRef<ErrorBag | undefined>
   // a zod schema of the form data
-  // this is validated based on the validationStrategy or by manually triggering validateForm on the form object 
-  schema?: MaybeRef<z.ZodType>
+  // this is validated based on the validation flags or by manually triggering validateForm on the form object
+  // TOut is inferred from the schema's output type if provided
+  schema?: MaybeRef<z.ZodType<TOut>>
   // a custom validation function which is called with the current form data
   // this is additional to the schema for custom validations
-  validateFn?: MaybeRef<ValidationFunction<T>>
+  validateFn?: MaybeRef<ValidationFunction<T, TOut>>
   // if the form data of a property should be reset or kept if all fields corresponding to this property are unmounted
+  // defaults to true
   keepValuesOnUnmount?: MaybeRef<boolean>
-  // when validation should be done (on touch, pre submit, etc.)
-  validationStrategy?: MaybeRef<ValidationStrategy>
-}): Form<T>
+  // validation flags before first submit (defaults: validateOnSubmit: true, all others: false)
+  validationBeforeSubmit?: ValidationFlags
+  // validation flags after first submit (defaults: validateOnSubmit: true, validateOnDataChange: true, validateOnFieldRegister: true)
+  validationAfterSubmit?: ValidationFlags
+}): Form<T, TOut>
 ```
-This composable returns a `Form<T>` object.
+This composable returns a `Form<T, TOut>` object.
 
-## Type `Form<T>`
+## Type `ValidationFlags`
+Controls when validation is triggered:
+```typescript
+interface ValidationFlags {
+  validateOnBlur?: MaybeRefOrGetter<boolean>
+  validateOnFormOpen?: MaybeRefOrGetter<boolean>
+  validateOnSubmit?: MaybeRefOrGetter<boolean>
+  validateOnDataChange?: MaybeRefOrGetter<boolean>
+  validateOnFieldRegister?: MaybeRefOrGetter<boolean>
+}
+```
+
+## Type `Form<T, TOut>`
 Here, `T` is the type of the form data, which is inferred from the `initialData` property of the options object passed to `useForm`.
+`TOut` is the output type after validation/transformation. When a zod schema is provided, `TOut` is a merge of `T` with the schema's output type,
+where the schema type takes precedence for properties it defines, and `T` provides types for properties unknown to the schema.
 You can also explicitly provide a type argument to `useForm<T>` if needed (useful if the initial data is an empty object `{}`).
 
 This object has the following properties and methods:
 ```typescript
-interface Form<T extends object> {
+interface Form<T extends object, TOut = T> {
   // the current working data of the form
   // this might differ from initialData if the user has changed some values
   data: Ref<T>
@@ -66,24 +84,85 @@ interface Form<T extends object> {
   // defines a custom validator for the form
   // with this, a subcomponent might add a validator function and/or schema to the form
   // without needing access to the initial useForm call
-  defineValidator: <TData extends T>(options: ValidatorOptions<TData> | Ref<Validator<TData>>) => Ref<Validator<TData> | undefined>
+  defineValidator: <TData extends T, TDataOut extends TOut>(
+    options: ValidatorOptions<TData, TDataOut> | Ref<Validator<TData, TDataOut>>
+  ) => Ref<Validator<TData, TDataOut> | undefined>
 
   // resets the form data and errors, as well as the dirty, touched etc. state of all fields
   reset: () => void
   // manually triggers validation of the form data based on schema and/or validateFn
-  validateForm: () => Promise<ValidationResult>
+  // returns the validation result with errors and parsed data (if valid)
+  validateForm: () => Promise<ValidationResult<TOut>>
+
+  // creates a submit handler that validates the form before calling onSubmit
+  // onSubmit receives the validated/transformed data (TOut)
+  submitHandler: (onSubmit: (data: TOut) => Awaitable<void>) => (event: SubmitEvent) => Promise<void>
 
   // creates a subform for a nested object or array property of the form data
-  // the subform is again a Form<T> object, where T is the type of the nested property
+  // the subform is again a Form object, where T is the type of the nested property
   // it will contain all errors that have paths starting with the path of the subform
   // changes to the subform data will propagate to the main form data and vice versa
   getSubForm: <P extends EntityPaths<T>>(
       path: P,
       options?: SubformOptions<PickEntity<T, P>>,
   ) => Form<PickEntity<T, P>>
+
+  // creates a field array for managing dynamic lists
+  // see the Field Arrays section below for details
+  getFieldArray: <K extends Paths<T>>(
+    path: PickProps<T, K> extends unknown[] ? K : never,
+    options?: FieldArrayOptions<PickProps<T, K> extends (infer U)[] ? U : never>,
+  ) => FieldArray<PickProps<T, K> extends (infer U)[] ? U : never, K>
 }
 ```
 
+## Method `setInitialData`
+The `setInitialData` method is available on `FormField` objects (returned by `getField` or `defineField`). It updates what is considered the "initial" value of a field. If the field is not dirty, it also updates the current data.
+
+This is useful when loading data asynchronously after the form is initialized:
+
+```typescript
+const { setInitialData } = form.getField('person.firstName')
+
+// After fetching data from an API
+const fetchedData = await fetchUserData()
+setInitialData(fetchedData.firstName)
+// If the field wasn't dirty, the current data is also updated
+```
+
+## Method `defineValidator`
+The `defineValidator` method allows subcomponents to add validation rules to a form without needing access to the initial `useForm` call. The validator is automatically removed when the component unmounts.
+
+This is particularly useful on subforms, where a reusable component can define its own validation:
+
+```vue
+<!-- AddressFields.vue - a reusable address component -->
+<script setup lang="ts">
+import type { Form } from '@teamnovu/kit-vue-forms'
+import { z } from 'zod'
+
+const props = defineProps<{
+  form: Form<{ street: string; city: string; zip: string }>
+}>()
+
+// This validation only applies while AddressFields is mounted
+props.form.defineValidator({
+  schema: z.object({
+    street: z.string().min(1, 'Street is required'),
+    city: z.string().min(1, 'City is required'),
+    zip: z.string().regex(/^\d{4}$/, 'Invalid zip code'),
+  }),
+})
+</script>
+```
+
+```vue
+<!-- Parent component using FormPart -->
+<FormPart :form="form" path="person.address" #="{ subform }">
+  <AddressFields :form="subform" />
+</FormPart>
+```
+
 ## Type `ErrorBag`
 The errors in the form are structured in an `ErrorBag` object. Most errors are tied to properties in the form. However,
 there might be cases where there are errors, that cannot be tied to one property. To account for that the `ErrorBag` satisfies the following interface:
@@ -98,6 +177,33 @@ interface ErrorBag {
 }
 ```
 
+## Field Arrays
+For managing dynamic lists (add, remove, reorder items), use `getFieldArray`. It provides stable IDs for each item,
+which is important for efficient Vue rendering with `v-for`.
+
+```typescript
+const hobbies = form.getFieldArray('person.hobbies')
+
+// add item
+hobbies.push('new hobby')
+
+// remove by id
+hobbies.remove(hobbies.items.value[0].id)
+```
+```vue
+<div v-for="field in hobbies.items.value" :key="field.id">
+  <FormTextField :form="form" :path="field.path" />
+  <button @click="hobbies.remove(field.id)">Remove</button>
+</div>
+```
+
+For objects where identity should be based on a property (e.g. `id`) rather than reference equality, provide a `hashFn`:
+```typescript
+const products = form.getFieldArray('products', {
+  hashFn: (item) => item.id
+})
+```
+
 ## Component `FormPart`
 A component to define a subform part for a nested object or array property of the form data. This corresponds to the
 `getSubForm` method of the `Form<T>` object, but in component form to be easily used in the template. An example usage is as follows:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "",
   "main": "dist/index.js",
   "type": "module",

package/src/components/FormFieldWrapper.vue

@@ -60,4 +60,6 @@ defineOptions({
 })
 
 defineProps<FormFieldWrapperProps<TData, TPath, TComponent, TDataOut>>()
+
+defineSlots<Record<string, (props: any) => any>>()
 </script>

package/src/composables/useFieldRegistry.ts

@@ -82,7 +82,7 @@ export function useFieldRegistry<T extends FormDataDefault, TOut = T>(
 ) {
   const fieldReferenceCounter = new Map<Paths<T>, Rc>()
   const fields = shallowReactive(new Map()) as FieldRegistryCache<T>
-  const registryOptions = {
+  const registryOptions: FieldRegistryOptions = {
     ...optionDefaults,
     ...fieldRegistryOptions,
   }
@@ -95,7 +95,7 @@ export function useFieldRegistry<T extends FormDataDefault, TOut = T>(
   }
 
   const deregisterField = (path: Paths<T>) => {
-    if (!registryOptions?.keepValuesOnUnmount) {
+    if (!unref(registryOptions?.keepValuesOnUnmount ?? true)) {
       fields.get(path)?.reset()
     }
     fields.delete(path)

package/src/composables/useForm.ts

@@ -113,7 +113,7 @@ export function useForm<T extends FormDataDefault, TOut = T>(
     validateForm: validationState.validateForm as Form<T, TOut>['validateForm'],
     submitHandler: onSubmit => makeSubmitHandler(form, validationState)(onSubmit),
     getSubForm: (path, subformOptions) => {
-      return createSubformInterface(form, path, options, subformOptions)
+      return createSubformInterface(form, path, validationState, subformOptions)
     },
     getFieldArray: (path, fieldArrayOptions) => {
       return useFieldArray(form, path, fieldArrayOptions)

package/src/composables/useSubform.ts

@@ -16,10 +16,10 @@ import {
 import { makeSubmitHandler } from '../utils/submitHandler'
 import { useFieldArray } from './useFieldArray'
 import type { DefineFieldOptions } from './useFieldRegistry'
-import type { UseFormOptions } from './useForm'
 import {
   createValidator,
   SuccessValidationResult,
+  type ValidationState,
   type ValidatorOptions,
 } from './useValidation'
 
@@ -65,7 +65,7 @@ export function createSubformInterface<
 >(
   mainForm: Form<T, TOut>,
   path: K,
-  formOptions?: UseFormOptions<T, TOut>,
+  validationState: ValidationState<T, TOut>,
   _options?: SubformOptions<PickEntity<T, K>>,
 ): Form<PickEntity<T, K>, PickEntity<TOut, K>> {
   type ST = PickEntity<T, K>
@@ -158,7 +158,10 @@ export function createSubformInterface<
   const errors = computed(() =>
     filterErrorsForPath(unref(mainForm.errors), path))
 
-  const validateForm = (() => mainForm.validateForm()) as Form<ST, STOut>['validateForm']
+  const validateForm = (() => mainForm.validateForm()) as Form<
+    ST,
+    STOut
+  >['validateForm']
 
   // Nested subforms
   const getSubForm = <P extends EntityPaths<ST>>(
@@ -203,7 +206,8 @@ export function createSubformInterface<
     reset,
     validateForm,
     getSubForm,
-    submitHandler: onSubmit => makeSubmitHandler(subForm, formOptions ?? {})(onSubmit),
+    submitHandler: onSubmit =>
+      makeSubmitHandler(subForm, validationState)(onSubmit),
     getFieldArray: (fieldArrayPath, fieldArrayOptions) => {
       return useFieldArray(subForm, fieldArrayPath, fieldArrayOptions)
     },

package/src/composables/useValidation.ts

@@ -1,7 +1,26 @@
-import { computed, getCurrentScope, isRef, onBeforeUnmount, reactive, ref, toRefs, toValue, unref, watch, type MaybeRef, type MaybeRefOrGetter, type Ref } from 'vue'
-import z from 'zod'
+import {
+  computed,
+  getCurrentScope,
+  isRef,
+  onBeforeUnmount,
+  reactive,
+  ref,
+  toRefs,
+  toValue,
+  unref,
+  watch,
+  type MaybeRef,
+  type MaybeRefOrGetter,
+  type Ref,
+} from 'vue'
+import type z from 'zod'
 import type { FormDataDefault } from '../types/form'
-import type { ErrorBag, ValidationFunction, ValidationResult, Validator } from '../types/validation'
+import type {
+  ErrorBag,
+  ValidationFunction,
+  ValidationResult,
+  Validator,
+} from '../types/validation'
 import { hasErrors, isValidResult, mergeErrors } from '../utils/validation'
 import { flattenError } from '../utils/zod'
 
@@ -35,7 +54,8 @@ export interface ValidatorOptions<T, TOut = T> {
   validateFn?: MaybeRef<ValidationFunction<T, TOut> | undefined>
 }
 
-export interface ValidationOptions<T, TOut = T> extends ValidatorOptions<T, TOut> {
+export interface ValidationOptions<T, TOut = T>
+  extends ValidatorOptions<T, TOut> {
   errors?: MaybeRef<ErrorBag | undefined>
   validationBeforeSubmit?: ValidationFlags
   validationAfterSubmit?: ValidationFlags
@@ -48,7 +68,8 @@ export const SuccessValidationResult: ValidationResult<never> = {
   },
 }
 
-class ZodSchemaValidator<T extends FormDataDefault, TOut = T> implements Validator<T, TOut> {
+class ZodSchemaValidator<T extends FormDataDefault, TOut = T>
+implements Validator<T, TOut> {
   constructor(private schema?: z.ZodType<TOut, T>) {}
 
   async validate(data: T): Promise<ValidationResult<TOut>> {
@@ -74,7 +95,8 @@ class ZodSchemaValidator<T extends FormDataDefault, TOut = T> implements Validat
   }
 }
 
-class FunctionValidator<T extends FormDataDefault, TOut = T> implements Validator<T, TOut> {
+class FunctionValidator<T extends FormDataDefault, TOut = T>
+implements Validator<T, TOut> {
   constructor(private validateFn?: ValidationFunction<T, TOut>) {}
 
   async validate(data: T): Promise<ValidationResult<TOut>> {
@@ -101,7 +123,8 @@ class FunctionValidator<T extends FormDataDefault, TOut = T> implements Validato
   }
 }
 
-class CombinedValidator<T extends FormDataDefault, TOut = T> implements Validator<T, TOut> {
+class CombinedValidator<T extends FormDataDefault, TOut = T>
+implements Validator<T, TOut> {
   private schemaValidator: ZodSchemaValidator<T, TOut>
   private functionValidator: FunctionValidator<T, TOut>
 
@@ -129,10 +152,13 @@ class CombinedValidator<T extends FormDataDefault, TOut = T> implements Validato
 export function createValidator<T extends FormDataDefault, TOut = T>(
   options: ValidatorOptions<T, TOut>,
 ): Ref<Validator<T, TOut> | undefined> {
-  return computed(() => new CombinedValidator(
-    unref(options.schema) as z.ZodType<TOut, T>,
-    unref(options.validateFn) as ValidationFunction<T, TOut>,
-  ))
+  return computed(
+    () =>
+      new CombinedValidator(
+        unref(options.schema) as z.ZodType<TOut, T>,
+        unref(options.validateFn) as ValidationFunction<T, TOut>,
+      ),
+  )
 }
 
 export function useValidation<T extends FormDataDefault, TOut = T>(
@@ -145,20 +171,29 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
     errors: unref(options.errors) ?? SuccessValidationResult.errors,
   })
 
-  const updateErrors = (newErrors: ErrorBag = SuccessValidationResult.errors) => {
-    validationState.errors = mergeErrors(unref(options.errors) ?? SuccessValidationResult.errors, newErrors)
+  const updateErrors = (
+    newErrors: ErrorBag = SuccessValidationResult.errors,
+  ) => {
+    validationState.errors = mergeErrors(
+      unref(options.errors) ?? SuccessValidationResult.errors,
+      newErrors,
+    )
   }
 
   // Watch for changes in the error bag and update validation state
-  watch(() => unref(options.errors), async () => {
-    if (validationState.isValidated) {
-      const validationResults = await getValidationResults()
+  watch(
+    () => unref(options.errors),
+    async () => {
+      if (validationState.isValidated) {
+        const validationResults = await getValidationResults()
 
-      updateErrors(validationResults.errors)
-    } else {
-      updateErrors()
-    }
-  }, { immediate: true })
+        updateErrors(validationResults.errors)
+      } else {
+        updateErrors()
+      }
+    },
+    { immediate: true },
+  )
 
   // Watch for changes in validation function or schema
   // to trigger validation. Only run if validation is already validated.
@@ -187,11 +222,15 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
   })
 
   const defineValidator = <TData extends T, TDataOut extends TOut>(
-    options: ValidatorOptions<TData, TDataOut> | Ref<Validator<TData, TDataOut>>,
+    options:
+      | ValidatorOptions<TData, TDataOut>
+      | Ref<Validator<TData, TDataOut>>,
   ) => {
     const validator = isRef(options) ? options : createValidator(options)
 
-    validationState.validators.push(validator as Ref<Validator<T, TOut> | undefined>)
+    validationState.validators.push(
+      validator as Ref<Validator<T, TOut> | undefined>,
+    )
 
     if (getCurrentScope()) {
       onBeforeUnmount(() => {
@@ -240,7 +279,9 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
     }
   }
 
-  const validateField = async (path: string): Promise<ValidationResult<TOut>> => {
+  const validateField = async (
+    path: string,
+  ): Promise<ValidationResult<TOut>> => {
     const validationResults = await getValidationResults()
 
     updateErrors({
@@ -272,7 +313,10 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
     return toValue(flags?.[flag] ?? false)
   }
 
-  const validateStrategy = <K extends keyof ValidationFlags>(flag: K, path: string) => {
+  const validateStrategy = <K extends keyof ValidationFlags>(
+    flag: K,
+    path: string,
+  ) => {
     if (!canValidate(flag)) {
       return
     }
@@ -292,4 +336,6 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
   }
 }
 
-export type ValidationState<T extends FormDataDefault, TOut = T> = ReturnType<typeof useValidation<T, TOut>>
+export type ValidationState<T extends FormDataDefault, TOut = T> = ReturnType<
+  typeof useValidation<T, TOut>
+>

package/src/types/form.ts

@@ -5,11 +5,11 @@ import type { SubformOptions } from '../composables/useSubform'
 import type { ValidatorOptions } from '../composables/useValidation'
 import type { EntityPaths, Paths, PickEntity, PickProps } from './util'
 import type {
-    ErrorBag,
-    ValidationErrorMessage,
-    ValidationErrors,
-    ValidationResult,
-    Validator,
+  ErrorBag,
+  ValidationErrorMessage,
+  ValidationErrors,
+  ValidationResult,
+  Validator,
 } from './validation'
 
 export type FormDataDefault = object

package/src/types/util.ts

@@ -1,4 +1,3 @@
-import type { Prop } from 'vue'
 import type { FormDataDefault } from './form'
 
 /**

package/src/utils/submitHandler.ts

@@ -5,7 +5,7 @@ import { isValidResult } from './validation'
 
 export function makeSubmitHandler<T extends FormDataDefault, TOut = T>(
   form: Form<T, TOut>,
-  validationState: ValidationState<T, TOut>,
+  validationState: Pick<ValidationState<T, TOut>, 'canValidate'>,
 ) {
   return (onSubmit: (data: TOut) => Awaitable<void>) => {
     return async (event?: SubmitEvent) => {

package/src/utils/zod.ts

@@ -1,4 +1,4 @@
-import z from 'zod'
+import type z from 'zod'
 import type { ErrorBag } from '../types/validation'
 
 export function flattenError(error: z.ZodError): ErrorBag {
@@ -8,14 +8,17 @@ export function flattenError(error: z.ZodError): ErrorBag {
 
   const propertyErrors = error.issues
     .filter(issue => issue.path.length > 0)
-    .reduce((acc, issue) => {
-      const path = issue.path.join('.')
+    .reduce(
+      (acc, issue) => {
+        const path = issue.path.join('.')
 
-      return {
-        ...acc,
-        [path]: [...(acc[path] ?? []), issue.message],
-      }
-    }, {} as ErrorBag['propertyErrors'])
+        return {
+          ...acc,
+          [path]: [...(acc[path] ?? []), issue.message],
+        }
+      },
+      {} as ErrorBag['propertyErrors'],
+    )
 
   return {
     general,

package/tests/path-utils.test.ts

@@ -156,4 +156,3 @@ describe('Path Utilities', () => {
     })
   })
 })
-

package/tests/useForm.test.ts

@@ -397,7 +397,9 @@ describe('useForm', () => {
       },
     })
 
-    effectScope().run(() => {
+    const scope = effectScope()
+
+    scope.run(() => {
       const nameField = form.defineField({ path: 'name' })
 
       expect(form.fields.value.length).toBe(1)
@@ -406,6 +408,8 @@ describe('useForm', () => {
       nameField.setData('Modified')
     })
 
+    scope.stop()
+
     expect(form.data.value.name).toBe('Modified')
   })