refactor: adjust types for getFormFieldOptions

Author: LeCarbonator

packages/form-core/src/FieldGroupApi.ts

@@ -6,7 +6,7 @@ import type {
   FormAsyncValidateOrFn,
   FormValidateOrFn,
 } from './FormApi'
-import type { AnyFieldMeta, AnyFieldMetaBase } from './FieldApi'
+import type { AnyFieldMetaBase, FieldOptions } from './FieldApi'
 import type {
   DeepKeys,
   DeepKeysOfType,
@@ -163,6 +163,53 @@ export class FieldGroupApi<
     return concatenatePaths(formMappedPath, restOfPath)
   }
 
+  /**
+   * Get the field options with the true form DeepKeys for validators
+   * @private
+   */
+  getFormFieldOptions = <
+    TOptions extends FieldOptions<
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any
+    >,
+  >(
+    props: TOptions,
+  ): TOptions => {
+    const newProps = { ...props }
+    const validators = newProps.validators
+
+    if (
+      validators &&
+      (validators.onChangeListenTo || validators.onBlurListenTo)
+    ) {
+      const newValidators = { ...validators }
+
+      const remapListenTo = (listenTo: DeepKeys<any>[] | undefined) => {
+        if (!listenTo) return undefined
+        return listenTo.map((localFieldName) =>
+          this.getFormFieldName(localFieldName),
+        )
+      }
+
+      newValidators.onChangeListenTo = remapListenTo(
+        validators.onChangeListenTo,
+      )
+      newValidators.onBlurListenTo = remapListenTo(validators.onBlurListenTo)
+
+      newProps.validators = newValidators
+    }
+
+    return newProps
+  }
+
   store: Derived<FieldGroupState<TFieldGroupData>>
 
   get state() {
@@ -458,43 +505,4 @@ export class FieldGroupApi<
 
   validateAllFields = (cause: ValidationCause) =>
     this.form.validateAllFields(cause)
-
-  /**
-   * Remaps field validator listener paths to their full form paths.
-   */
-  remapFieldProps = <TProps extends { validators?: any }>(
-    props: TProps,
-  ): TProps => {
-    const newProps = { ...props }
-    const validators = newProps.validators
-
-    if (
-      validators &&
-      (validators.onChangeListenTo || validators.onBlurListenTo)
-    ) {
-      const newValidators = { ...validators }
-
-      const remapListenTo = (listenTo: DeepKeys<any>[] | undefined) => {
-        if (!listenTo) return undefined
-        return listenTo.map((localFieldName) =>
-          this.getFormFieldName(localFieldName),
-        )
-      }
-
-      if (newValidators.onChangeListenTo) {
-        newValidators.onChangeListenTo = remapListenTo(
-          newValidators.onChangeListenTo,
-        )
-      }
-      if (newValidators.onBlurListenTo) {
-        newValidators.onBlurListenTo = remapListenTo(
-          newValidators.onBlurListenTo,
-        )
-      }
-
-      newProps.validators = newValidators
-    }
-
-    return newProps
-  }
 }

packages/form-core/tests/FieldGroupApi.spec.ts

@@ -1,6 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
 import { FieldApi, FieldGroupApi, FormApi } from '../src/index'
-import { defaultFieldMeta } from '../src/metaHelper'
 
 describe('field group api', () => {
   type Person = {
@@ -941,12 +940,13 @@ describe('field group api', () => {
     fieldGroupString.mount()
 
     const props1 = {
+      name: 'confirmPassword',
       validators: {
         onChangeListenTo: ['password'],
         onBlurListenTo: ['confirmPassword'],
       },
     }
-    const remappedProps1 = fieldGroupString.remapFieldProps(props1)
+    const remappedProps1 = fieldGroupString.getFormFieldOptions(props1)
     expect(remappedProps1.validators.onChangeListenTo).toEqual([
       'account.password',
     ])
@@ -965,11 +965,12 @@ describe('field group api', () => {
     fieldGroupObject.mount()
 
     const props2 = {
+      name: 'confirmPassword',
       validators: {
         onChangeListenTo: ['password'],
       },
     }
-    const remappedProps2 = fieldGroupObject.remapFieldProps(props2)
+    const remappedProps2 = fieldGroupObject.getFormFieldOptions(props2)
     expect(remappedProps2.validators.onChangeListenTo).toEqual(['userPassword'])
   })
 })

packages/react-form/src/useFieldGroup.tsx

@@ -194,21 +194,15 @@ export function useFieldGroup<
       return <form.AppForm {...appFormProps} />
     }
 
-    extendedApi.AppField = function AppField({ name, ...appFieldProps }) {
+    extendedApi.AppField = function AppField(props) {
       return (
-        <form.AppField
-          name={formLensApi.getFormFieldName(name)}
-          {...formLensApi.remapFieldProps(appFieldProps as any)}
-        />
+        <form.AppField {...(formLensApi.getFormFieldOptions(props) as any)} />
       ) as never
     }
 
-    extendedApi.Field = function Field({ name, ...fieldProps }) {
+    extendedApi.Field = function Field(props) {
       return (
-        <form.Field
-          name={formLensApi.getFormFieldName(name)}
-          {...formLensApi.remapFieldProps(fieldProps as any)}
-        />
+        <form.Field {...(formLensApi.getFormFieldOptions(props) as any)} />
       ) as never
     }