fix(react-form): remap listener paths in withFieldGroup

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,
@@ -175,6 +175,57 @@ 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,
+      any,
+      any
+    >,
+  >(
+    props: TOptions,
+  ): TOptions => {
+    const newProps = { ...props }
+    const validators = newProps.validators
+
+    newProps.name = this.getFormFieldName(props.name)
+
+    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() {

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 = {
@@ -919,4 +918,143 @@ describe('field group api', () => {
       'complexValue.prop1',
     )
   })
+
+  it('should remap the name of field options correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        user: {
+          profile: {
+            personal: {
+              firstName: '',
+              lastName: '',
+              email: '',
+            },
+            preferences: {
+              theme: 'light',
+              notifications: true,
+            },
+          },
+          settings: {
+            privacy: {
+              shareData: false,
+              allowMarketing: true,
+            },
+          },
+        },
+        alternateProfile: {
+          firstName: '',
+          lastName: '',
+          email: '',
+        },
+      },
+    })
+    form.mount()
+
+    const fieldGroupString = new FieldGroupApi({
+      form,
+      fields: 'user.profile.personal',
+      defaultValues: { firstName: '' },
+    })
+    fieldGroupString.mount()
+
+    const props1 = {
+      name: 'firstName',
+    }
+    const remappedProps1 = fieldGroupString.getFormFieldOptions(props1)
+    expect(remappedProps1.name).toBe('user.profile.personal.firstName')
+
+    const fieldGroupObject = new FieldGroupApi({
+      form,
+      fields: {
+        firstName: 'alternateProfile.firstName',
+        lastName: 'alternateProfile.lastName',
+        email: 'alternateProfile.email',
+      },
+      defaultValues: { firstName: '' },
+    })
+    fieldGroupObject.mount()
+
+    const props2 = {
+      name: 'firstName',
+    }
+    const remappedProps2 = fieldGroupObject.getFormFieldOptions(props2)
+    expect(remappedProps2.name).toBe('alternateProfile.firstName')
+  })
+
+  it('should remap listener paths with its remapFieldProps method', () => {
+    const form = new FormApi({
+      defaultValues: {
+        user: {
+          profile: {
+            personal: {
+              firstName: '',
+              lastName: '',
+              email: '',
+            },
+            preferences: {
+              theme: 'light',
+              notifications: true,
+            },
+          },
+          settings: {
+            privacy: {
+              shareData: false,
+              allowMarketing: true,
+            },
+          },
+        },
+        alternateProfile: {
+          firstName: '',
+          lastName: '',
+          email: '',
+        },
+      },
+    })
+    form.mount()
+
+    const fieldGroupString = new FieldGroupApi({
+      form,
+      fields: 'user.profile.personal',
+      defaultValues: { firstName: '', lastName: '', email: '' },
+    })
+    fieldGroupString.mount()
+
+    const props1 = {
+      name: 'email',
+      validators: {
+        onChangeListenTo: ['firstName'],
+        onBlurListenTo: ['lastName'],
+      },
+    }
+    const remappedProps1 = fieldGroupString.getFormFieldOptions(props1)
+    expect(remappedProps1.validators.onChangeListenTo).toEqual([
+      'user.profile.personal.firstName',
+    ])
+    expect(remappedProps1.validators.onBlurListenTo).toEqual([
+      'user.profile.personal.lastName',
+    ])
+
+    const fieldGroupObject = new FieldGroupApi({
+      form,
+      fields: {
+        firstName: 'alternateProfile.firstName',
+        lastName: 'alternateProfile.lastName',
+        email: 'alternateProfile.email',
+      },
+      defaultValues: { firstName: '', lastName: '', email: '' },
+    })
+    fieldGroupObject.mount()
+
+    const props2 = {
+      name: 'email',
+      validators: {
+        onChangeListenTo: ['firstName', 'lastName'],
+      },
+    }
+    const remappedProps2 = fieldGroupObject.getFormFieldOptions(props2)
+    expect(remappedProps2.validators.onChangeListenTo).toEqual([
+      'alternateProfile.firstName',
+      'alternateProfile.lastName',
+    ])
+  })
 })

packages/react-form/src/useField.tsx

@@ -7,6 +7,7 @@ import type {
   DeepValue,
   FieldAsyncValidateOrFn,
   FieldValidateOrFn,
+  FieldValidators,
   FormAsyncValidateOrFn,
   FormValidateOrFn,
 } from '@tanstack/form-core'
@@ -516,32 +517,63 @@ export type LensFieldComponent<
 >({
   children,
   ...fieldOptions
-}: FieldComponentBoundProps<
-  unknown,
-  string,
-  TData,
-  TOnMount,
-  TOnChange,
-  TOnChangeAsync,
-  TOnBlur,
-  TOnBlurAsync,
-  TOnSubmit,
-  TOnSubmitAsync,
-  TOnDynamic,
-  TOnDynamicAsync,
-  undefined | FormValidateOrFn<unknown>,
-  undefined | FormValidateOrFn<unknown>,
-  undefined | FormAsyncValidateOrFn<unknown>,
-  undefined | FormValidateOrFn<unknown>,
-  undefined | FormAsyncValidateOrFn<unknown>,
-  undefined | FormValidateOrFn<unknown>,
-  undefined | FormAsyncValidateOrFn<unknown>,
-  undefined | FormValidateOrFn<unknown>,
-  undefined | FormAsyncValidateOrFn<unknown>,
-  undefined | FormAsyncValidateOrFn<unknown>,
-  TParentSubmitMeta,
-  ExtendedApi
-> & { name: TName }) => ReactNode
+}: Omit<
+  FieldComponentBoundProps<
+    unknown,
+    string,
+    TData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    TParentSubmitMeta,
+    ExtendedApi
+  >,
+  'name' | 'validators'
+> & {
+  name: TName
+  validators?: Omit<
+    FieldValidators<
+      unknown,
+      string,
+      TData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync
+    >,
+    'onChangeListenTo' | 'onBlurListenTo'
+  > & {
+    /**
+     * An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes
+     */
+    onChangeListenTo?: DeepKeys<TLensData>[]
+    /**
+     * An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes
+     */
+    onBlurListenTo?: DeepKeys<TLensData>[]
+  }
+}) => ReactNode
 
 /**
  * A function component that takes field options and a render function as children and returns a React component.

packages/react-form/src/useFieldGroup.tsx

@@ -210,22 +210,14 @@ 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)}
-          {...(appFieldProps as any)}
-        />
-      ) as never
+        <form.AppField {...(formLensApi.getFormFieldOptions(props) as any)} />
+      )
     }
 
-    extendedApi.Field = function Field({ name, ...fieldProps }) {
-      return (
-        <form.Field
-          name={formLensApi.getFormFieldName(name)}
-          {...(fieldProps as any)}
-        />
-      ) as never
+    extendedApi.Field = function Field(props) {
+      return <form.Field {...(formLensApi.getFormFieldOptions(props) as any)} />
     }
 
     extendedApi.Subscribe = function Subscribe(props: any) {