@tanstack/form-core 0.18.0 → 0.19.0

package/src/FieldApi.ts

@@ -1,13 +1,13 @@
 import { Store } from '@tanstack/store'
 import { getAsyncValidatorArray, getSyncValidatorArray } from './utils'
-import type { FormApi } from './FormApi'
+import type { FieldInfo, FormApi } from './FormApi'
 import type {
   ValidationCause,
   ValidationError,
   ValidationErrorMap,
   Validator,
 } from './types'
-import type { Updater } from './utils'
+import type { AsyncValidator, SyncValidator, Updater } from './utils'
 import type { DeepKeys, DeepValue, NoInfer } from './util-types'
 
 export type FieldValidateFn<
@@ -150,6 +150,7 @@ export interface FieldValidators<
     TData
   >
   onChangeAsyncDebounceMs?: number
+  onChangeListenTo?: DeepKeys<TParentData>[]
   onBlur?: FieldValidateOrFn<
     TParentData,
     TName,
@@ -165,6 +166,7 @@ export interface FieldValidators<
     TData
   >
   onBlurAsyncDebounceMs?: number
+  onBlurListenTo?: DeepKeys<TParentData>[]
   onSubmit?: FieldValidateOrFn<
     TParentData,
     TName,
@@ -447,7 +449,7 @@ export class FieldApi<
     options?: { touch?: boolean; notify?: boolean },
   ) => {
     this.form.setFieldValue(this.name, updater as never, options)
-    this.validate('change', this.state.value)
+    this.validate('change')
   }
 
   _getMeta = () => this.form.getFieldMeta(this.name)
@@ -482,28 +484,67 @@ export class FieldApi<
   swapValues = (aIndex: number, bIndex: number) =>
     this.form.swapFieldValues(this.name, aIndex, bIndex)
 
+  getLinkedFields = (cause: ValidationCause) => {
+    const fields = Object.values(this.form.fieldInfo) as FieldInfo<
+      any,
+      TFormValidator
+    >[]
+
+    const linkedFields: FieldApi<any, any, any, any>[] = []
+    for (const field of fields) {
+      if (!field.instance) continue
+      const { onChangeListenTo, onBlurListenTo } =
+        field.instance.options.validators || {}
+      if (
+        cause === 'change' &&
+        onChangeListenTo?.includes(this.name as string)
+      ) {
+        linkedFields.push(field.instance)
+      }
+      if (cause === 'blur' && onBlurListenTo?.includes(this.name as string)) {
+        linkedFields.push(field.instance)
+      }
+    }
+
+    return linkedFields
+  }
+
   moveValue = (aIndex: number, bIndex: number) =>
     this.form.moveFieldValues(this.name, aIndex, bIndex)
 
-  validateSync = (value = this.state.value, cause: ValidationCause) => {
+  validateSync = (cause: ValidationCause) => {
     const validates = getSyncValidatorArray(cause, this.options)
 
+    const linkedFields = this.getLinkedFields(cause)
+    const linkedFieldValidates = linkedFields.reduce(
+      (acc, field) => {
+        const fieldValidates = getSyncValidatorArray(cause, field.options)
+        fieldValidates.forEach((validate) => {
+          ;(validate as any).field = field
+        })
+        return acc.concat(fieldValidates as never)
+      },
+      [] as Array<SyncValidator<any> & { field: FieldApi<any, any, any, any> }>,
+    )
+
     // Needs type cast as eslint errantly believes this is always falsy
     let hasErrored = false as boolean
 
     this.form.store.batch(() => {
-      for (const validateObj of validates) {
-        if (!validateObj.validate) continue
+      const validateFieldFn = (
+        field: FieldApi<any, any, any, any>,
+        validateObj: SyncValidator<any>,
+      ) => {
         const error = normalizeError(
-          this.runValidator({
+          field.runValidator({
             validate: validateObj.validate,
-            value: { value, fieldApi: this },
+            value: { value: field.getValue(), fieldApi: field },
             type: 'validate',
           }),
         )
         const errorMapKey = getErrorMapKey(validateObj.cause)
-        if (this.state.meta.errorMap[errorMapKey] !== error) {
-          this.setMeta((prev) => ({
+        if (field.state.meta.errorMap[errorMapKey] !== error) {
+          field.setMeta((prev) => ({
             ...prev,
             errorMap: {
               ...prev.errorMap,
@@ -515,6 +556,15 @@ export class FieldApi<
           hasErrored = true
         }
       }
+
+      for (const validateObj of validates) {
+        if (!validateObj.validate) continue
+        validateFieldFn(this, validateObj)
+      }
+      for (const fieldValitateObj of linkedFieldValidates) {
+        if (!fieldValitateObj.validate) continue
+        validateFieldFn(fieldValitateObj.field, fieldValitateObj)
+      }
     })
 
     /**
@@ -539,23 +589,45 @@ export class FieldApi<
     return { hasErrored }
   }
 
-  validateAsync = async (value = this.state.value, cause: ValidationCause) => {
+  validateAsync = async (cause: ValidationCause) => {
     const validates = getAsyncValidatorArray(cause, this.options)
 
+    const linkedFields = this.getLinkedFields(cause)
+    const linkedFieldValidates = linkedFields.reduce(
+      (acc, field) => {
+        const fieldValidates = getAsyncValidatorArray(cause, field.options)
+        fieldValidates.forEach((validate) => {
+          ;(validate as any).field = field
+        })
+        return acc.concat(fieldValidates as never)
+      },
+      [] as Array<
+        AsyncValidator<any> & { field: FieldApi<any, any, any, any> }
+      >,
+    )
+
     if (!this.state.meta.isValidating) {
       this.setMeta((prev) => ({ ...prev, isValidating: true }))
     }
 
+    for (const linkedField of linkedFields) {
+      linkedField.setMeta((prev) => ({ ...prev, isValidating: true }))
+    }
+
     /**
      * We have to use a for loop and generate our promises this way, otherwise it won't be sync
      * when there are no validators needed to be run
      */
-    const promises: Promise<ValidationError | undefined>[] = []
-
-    for (const validateObj of validates) {
-      if (!validateObj.validate) continue
+    const validatesPromises: Promise<ValidationError | undefined>[] = []
+    const linkedPromises: Promise<ValidationError | undefined>[] = []
+
+    const validateFieldAsyncFn = (
+      field: FieldApi<any, any, any, any>,
+      validateObj: AsyncValidator<any>,
+      promises: Promise<ValidationError | undefined>[],
+    ) => {
       const key = getErrorMapKey(validateObj.cause)
-      const fieldValidatorMeta = this.getInfo().validationMetaMap[key]
+      const fieldValidatorMeta = field.getInfo().validationMetaMap[key]
 
       fieldValidatorMeta?.lastAbortController.abort()
       const controller = new AbortController()
@@ -576,8 +648,8 @@ export class FieldApi<
                     await this.runValidator({
                       validate: validateObj.validate,
                       value: {
-                        value,
-                        fieldApi: this,
+                        value: field.getValue(),
+                        fieldApi: field,
                         signal: controller.signal,
                       },
                       type: 'validateAsync',
@@ -592,7 +664,7 @@ export class FieldApi<
             rawError = e as ValidationError
           }
           const error = normalizeError(rawError)
-          this.setMeta((prev) => {
+          field.setMeta((prev) => {
             return {
               ...prev,
               errorMap: {
@@ -608,19 +680,37 @@ export class FieldApi<
       )
     }
 
+    // TODO: Dedupe this logic to reduce bundle size
+    for (const validateObj of validates) {
+      if (!validateObj.validate) continue
+      validateFieldAsyncFn(this, validateObj, validatesPromises)
+    }
+    for (const fieldValitateObj of linkedFieldValidates) {
+      if (!fieldValitateObj.validate) continue
+      validateFieldAsyncFn(
+        fieldValitateObj.field,
+        fieldValitateObj,
+        linkedPromises,
+      )
+    }
+
     let results: ValidationError[] = []
-    if (promises.length) {
-      results = await Promise.all(promises)
+    if (validatesPromises.length || linkedPromises.length) {
+      results = await Promise.all(validatesPromises)
+      await Promise.all(linkedPromises)
     }
 
     this.setMeta((prev) => ({ ...prev, isValidating: false }))
 
+    for (const linkedField of linkedFields) {
+      linkedField.setMeta((prev) => ({ ...prev, isValidating: false }))
+    }
+
     return results.filter(Boolean)
   }
 
   validate = (
     cause: ValidationCause,
-    value?: TData,
   ): ValidationError[] | Promise<ValidationError[]> => {
     // If the field is pristine and validatePristine is false, do not validate
     if (!this.state.meta.isTouched) return []
@@ -630,13 +720,13 @@ export class FieldApi<
     } catch (_) {}
 
     // Attempt to sync validate first
-    const { hasErrored } = this.validateSync(value, cause)
+    const { hasErrored } = this.validateSync(cause)
 
     if (hasErrored && !this.options.asyncAlways) {
       return this.state.meta.errors
     }
     // No error? Attempt async validation
-    return this.validateAsync(value, cause)
+    return this.validateAsync(cause)
   }
 
   handleChange = (updater: Updater<TData>) => {

package/src/tests/FieldApi.spec.ts

@@ -721,4 +721,162 @@ describe('field api', () => {
     await sleep(1)
     expect(fn).toHaveBeenCalledTimes(1)
   })
+
+  it('should run onChange on a linked field', () => {
+    const form = new FormApi({
+      defaultValues: {
+        password: '',
+        confirm_password: '',
+      },
+    })
+
+    const passField = new FieldApi({
+      form,
+      name: 'password',
+    })
+
+    const passconfirmField = new FieldApi({
+      form,
+      name: 'confirm_password',
+      validators: {
+        onChangeListenTo: ['password'],
+        onChange: ({ value, fieldApi }) => {
+          if (value !== fieldApi.form.getFieldValue('password')) {
+            return 'Passwords do not match'
+          }
+          return undefined
+        },
+      },
+    })
+
+    passField.mount()
+    passconfirmField.mount()
+
+    passField.setValue('one', { touch: true })
+    expect(passconfirmField.state.meta.errors).toStrictEqual([
+      'Passwords do not match',
+    ])
+    passconfirmField.setValue('one', { touch: true })
+    expect(passconfirmField.state.meta.errors).toStrictEqual([])
+    passField.setValue('two', { touch: true })
+    expect(passconfirmField.state.meta.errors).toStrictEqual([
+      'Passwords do not match',
+    ])
+  })
+
+  it('should run onBlur on a linked field', () => {
+    const form = new FormApi({
+      defaultValues: {
+        password: '',
+        confirm_password: '',
+      },
+    })
+
+    const passField = new FieldApi({
+      form,
+      name: 'password',
+    })
+
+    const passconfirmField = new FieldApi({
+      form,
+      name: 'confirm_password',
+      validators: {
+        onBlurListenTo: ['password'],
+        onBlur: ({ value, fieldApi }) => {
+          if (value !== fieldApi.form.getFieldValue('password')) {
+            return 'Passwords do not match'
+          }
+          return undefined
+        },
+      },
+    })
+
+    passField.mount()
+    passconfirmField.mount()
+
+    passField.setValue('one', { touch: true })
+    expect(passconfirmField.state.meta.errors).toStrictEqual([])
+    passField.handleBlur()
+    expect(passconfirmField.state.meta.errors).toStrictEqual([
+      'Passwords do not match',
+    ])
+    passconfirmField.setValue('one', { touch: true })
+    expect(passconfirmField.state.meta.errors).toStrictEqual([
+      'Passwords do not match',
+    ])
+    passField.handleBlur()
+    expect(passconfirmField.state.meta.errors).toStrictEqual([])
+    passField.setValue('two', { touch: true })
+    passField.handleBlur()
+    expect(passconfirmField.state.meta.errors).toStrictEqual([
+      'Passwords do not match',
+    ])
+  })
+
+  it('should run onChangeAsync on a linked field', async () => {
+    vi.useRealTimers()
+    let resolve!: () => void
+    let promise = new Promise((r) => {
+      resolve = r as never
+    })
+
+    const fn = vi.fn()
+
+    const form = new FormApi({
+      defaultValues: {
+        password: '',
+        confirm_password: '',
+      },
+    })
+
+    const passField = new FieldApi({
+      form,
+      name: 'password',
+    })
+
+    const passconfirmField = new FieldApi({
+      form,
+      name: 'confirm_password',
+      validators: {
+        onChangeListenTo: ['password'],
+        onChangeAsync: async ({ value, fieldApi }) => {
+          await promise
+          fn()
+          if (value !== fieldApi.form.getFieldValue('password')) {
+            return 'Passwords do not match'
+          }
+          return undefined
+        },
+      },
+    })
+
+    passField.mount()
+    passconfirmField.mount()
+
+    passField.setValue('one', { touch: true })
+    resolve()
+    // Allow for a micro-tick to allow the promise to resolve
+    await sleep(1)
+    expect(passconfirmField.state.meta.errors).toStrictEqual([
+      'Passwords do not match',
+    ])
+    promise = new Promise((r) => {
+      resolve = r as never
+    })
+    passconfirmField.setValue('one', { touch: true })
+    resolve()
+    // Allow for a micro-tick to allow the promise to resolve
+    await sleep(1)
+    expect(passconfirmField.state.meta.errors).toStrictEqual([])
+    promise = new Promise((r) => {
+      resolve = r as never
+    })
+    passField.setValue('two', { touch: true })
+    resolve()
+    // Allow for a micro-tick to allow the promise to resolve
+    await sleep(1)
+    expect(passconfirmField.state.meta.errors).toStrictEqual([
+      'Passwords do not match',
+    ])
+  })
 })

package/src/tests/utils.spec.ts

@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'vitest'
-import { deleteBy, getBy, setBy } from '../utils'
+import { deleteBy, getBy, makePathArray, setBy } from '../utils'
 
 describe('getBy', () => {
   const structure = {
     name: 'Marc',
     kids: [
-      { name: 'Stephen', age: 10 },
-      { name: 'Taylor', age: 15 },
+      { name: 'Stephen', age: 10, hobbies: ['soccer', 'reading'] },
+      { name: 'Taylor', age: 15, hobbies: ['swimming', 'gaming'] },
     ],
     mother: {
       name: 'Lisa',
@@ -22,14 +22,23 @@ describe('getBy', () => {
     expect(getBy(structure, 'kids[0].name')).toBe(structure.kids[0]!.name)
     expect(getBy(structure, 'kids[0].age')).toBe(structure.kids[0]!.age)
   })
+
+  it('should get nested array subfields by path', () => {
+    expect(getBy(structure, 'kids[0].hobbies[0]')).toBe(
+      structure.kids[0]!.hobbies[0],
+    )
+    expect(getBy(structure, 'kids[0].hobbies[1]')).toBe(
+      structure.kids[0]!.hobbies[1],
+    )
+  })
 })
 
 describe('setBy', () => {
   const structure = {
     name: 'Marc',
     kids: [
-      { name: 'Stephen', age: 10 },
-      { name: 'Taylor', age: 15 },
+      { name: 'Stephen', age: 10, hobbies: ['soccer', 'reading'] },
+      { name: 'Taylor', age: 15, hobbies: ['swimming', 'gaming'] },
     ],
     mother: {
       name: 'Lisa',
@@ -47,14 +56,23 @@ describe('setBy', () => {
     )
     expect(setBy(structure, 'kids[0].age', 20).kids[0].age).toBe(20)
   })
+
+  it('should set nested array subfields by path', () => {
+    expect(
+      setBy(structure, 'kids[0].hobbies[0]', 'swimming').kids[0].hobbies[0],
+    ).toBe('swimming')
+    expect(
+      setBy(structure, 'kids[0].hobbies[1]', 'gaming').kids[0].hobbies[1],
+    ).toBe('gaming')
+  })
 })
 
 describe('deleteBy', () => {
   const structure = {
     name: 'Marc',
     kids: [
-      { name: 'Stephen', age: 10 },
-      { name: 'Taylor', age: 15 },
+      { name: 'Stephen', age: 10, hobbies: ['soccer', 'reading'] },
+      { name: 'Taylor', age: 15, hobbies: ['swimming', 'gaming'] },
     ],
     mother: {
       name: 'Lisa',
@@ -71,6 +89,15 @@ describe('deleteBy', () => {
     expect(deleteBy(structure, 'kids[0].age').kids[0].age).not.toBeDefined()
   })
 
+  it('should delete nested array subfields by path', () => {
+    expect(deleteBy(structure, 'kids[0].hobbies[0]').kids[0].hobbies[0]).toBe(
+      'reading',
+    )
+    expect(
+      deleteBy(structure, 'kids[0].hobbies[1]').kids[0].hobbies[1],
+    ).not.toBeDefined()
+  })
+
   it('should delete non-existent paths like a noop', () => {
     expect(deleteBy(structure, 'nonexistent')).toEqual(structure)
     expect(deleteBy(structure, 'nonexistent.nonexistent')).toEqual(structure)
@@ -78,3 +105,27 @@ describe('deleteBy', () => {
     expect(deleteBy(structure, 'nonexistent[3].nonexistent')).toEqual(structure)
   })
 })
+
+describe('makePathArray', () => {
+  it('should convert dot notation to array', () => {
+    expect(makePathArray('name')).toEqual(['name'])
+    expect(makePathArray('mother.name')).toEqual(['mother', 'name'])
+    expect(makePathArray('kids[0].name')).toEqual(['kids', 0, 'name'])
+    expect(makePathArray('kids[0].name[1]')).toEqual(['kids', 0, 'name', 1])
+    expect(makePathArray('kids[0].name[1].age')).toEqual([
+      'kids',
+      0,
+      'name',
+      1,
+      'age',
+    ])
+    expect(makePathArray('kids[0].name[1].age[2]')).toEqual([
+      'kids',
+      0,
+      'name',
+      1,
+      'age',
+      2,
+    ])
+  })
+})

package/src/utils.ts

@@ -126,14 +126,14 @@ const reFindMultiplePeriods = /\.{2,}/gm
 const intPrefix = '__int__'
 const intReplace = `${intPrefix}$1`
 
-function makePathArray(str: string) {
+export function makePathArray(str: string) {
   if (typeof str !== 'string') {
     throw new Error('Path must be a string.')
   }
 
   return str
-    .replace('[', '.')
-    .replace(']', '')
+    .replaceAll('[', '.')
+    .replaceAll(']', '')
     .replace(reFindNumbers0, intReplace)
     .replace(reFindNumbers1, `.${intReplace}.`)
     .replace(reFindNumbers2, `${intReplace}.`)
@@ -157,7 +157,7 @@ interface AsyncValidatorArrayPartialOptions<T> {
   asyncDebounceMs?: number
 }
 
-interface AsyncValidator<T> {
+export interface AsyncValidator<T> {
   cause: ValidationCause
   validate: T
   debounceMs: number
@@ -226,7 +226,7 @@ interface SyncValidatorArrayPartialOptions<T> {
   validators?: T
 }
 
-interface SyncValidator<T> {
+export interface SyncValidator<T> {
   cause: ValidationCause
   validate: T
 }