refactor(react-form): fix typing for using group.Field

Author: LeCarbonator

packages/form-core/src/FieldGroupApi.ts

@@ -186,6 +186,8 @@ export class FieldGroupApi<
     const newProps = { ...props }
     const validators = newProps.validators
 
+    newProps.name = this.getFormFieldName(props.name)
+
     if (
       validators &&
       (validators.onChangeListenTo || validators.onBlurListenTo)

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

@@ -919,6 +919,49 @@ describe('field group api', () => {
     )
   })
 
+  it('should remap the name of field options correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        account: {
+          password: '',
+          confirmPassword: '',
+        },
+        userPassword: '',
+        userConfirmPassword: '',
+      },
+    })
+    form.mount()
+
+    const fieldGroupString = new FieldGroupApi({
+      form,
+      fields: 'account',
+      defaultValues: { password: '' },
+    })
+    fieldGroupString.mount()
+
+    const props1 = {
+      name: 'password',
+    }
+    const remappedProps1 = fieldGroupString.getFormFieldOptions(props1)
+    expect(remappedProps1.name).toBe('account.password')
+
+    const fieldGroupObject = new FieldGroupApi({
+      form,
+      fields: {
+        password: 'userPassword',
+        confirmPassword: 'userConfirmPassword',
+      },
+      defaultValues: { password: '' },
+    })
+    fieldGroupObject.mount()
+
+    const props2 = {
+      name: 'password',
+    }
+    const remappedProps2 = fieldGroupObject.getFormFieldOptions(props2)
+    expect(remappedProps2.name).toBe('userPassword')
+  })
+
   it('should remap listener paths with its remapFieldProps method', () => {
     const form = new FormApi({
       defaultValues: {

packages/react-form/src/useField.tsx

@@ -7,6 +7,7 @@ import type {
   DeepValue,
   FieldAsyncValidateOrFn,
   FieldValidateOrFn,
+  FieldValidators,
   FormAsyncValidateOrFn,
   FormValidateOrFn,
 } from '@tanstack/form-core'
@@ -446,28 +447,57 @@ export type LensFieldComponent<
 >({
   children,
   ...fieldOptions
-}: FieldComponentBoundProps<
-  unknown,
-  string,
-  TData,
-  TOnMount,
-  TOnChange,
-  TOnChangeAsync,
-  TOnBlur,
-  TOnBlurAsync,
-  TOnSubmit,
-  TOnSubmitAsync,
-  undefined | FormValidateOrFn<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,
+    undefined | FormValidateOrFn<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
+    >,
+    '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/tests/createFormHook.test.tsx

@@ -450,4 +450,88 @@ describe('createFormHook', () => {
     const inputField1 = getByLabelText('unrelated')
     expect(inputField1).toHaveValue('John')
   })
+
+  it('should remap GroupFieldApi.Field validators to the correct names', () => {
+    const FieldGroupString = withFieldGroup({
+      defaultValues: { password: '', confirmPassword: '' },
+      render: function Render({ group }) {
+        return (
+          <group.Field
+            name="password"
+            validators={{
+              onChange: () => null,
+              onChangeListenTo: ['password'],
+              onBlur: () => null,
+              onBlurListenTo: ['confirmPassword'],
+            }}
+          >
+            {(field) => {
+              expect(field.options.validators?.onChangeListenTo).toStrictEqual([
+                'account.password',
+              ])
+              expect(field.options.validators?.onBlurListenTo).toStrictEqual([
+                'account.confirmPassword',
+              ])
+              return <></>
+            }}
+          </group.Field>
+        )
+      },
+    })
+
+    const FieldGroupObject = withFieldGroup({
+      defaultValues: { password: '', confirmPassword: '' },
+      render: function Render({ group }) {
+        return (
+          <group.Field
+            name="password"
+            validators={{
+              onChange: () => null,
+              onChangeListenTo: ['password'],
+              onBlur: () => null,
+              onBlurListenTo: ['confirmPassword'],
+            }}
+          >
+            {(field) => {
+              expect(field.options.validators?.onChangeListenTo).toStrictEqual([
+                'userPassword',
+              ])
+              expect(field.options.validators?.onBlurListenTo).toStrictEqual([
+                'userConfirmPassword',
+              ])
+              return <></>
+            }}
+          </group.Field>
+        )
+      },
+    })
+
+    const Parent = () => {
+      const form = useAppForm({
+        defaultValues: {
+          account: {
+            password: '',
+            confirmPassword: '',
+          },
+          userPassword: '',
+          userConfirmPassword: '',
+        },
+      })
+
+      return (
+        <>
+          <FieldGroupString form={form} fields="account" />
+          <FieldGroupObject
+            form={form}
+            fields={{
+              password: 'userPassword',
+              confirmPassword: 'userConfirmPassword',
+            }}
+          />
+        </>
+      )
+    }
+
+    render(<Parent />)
+  })
 })