@tanstack/form-core 1.16.0 → 1.18.0

package/src/mergeForm.ts

@@ -81,10 +81,25 @@ export function mergeForm<TFormData>(
     any,
     any,
     any,
+    any,
+    any,
     any
   >,
   state: Partial<
-    FormApi<TFormData, any, any, any, any, any, any, any, any, any>['state']
+    FormApi<
+      TFormData,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any
+    >['state']
   >,
 ) {
   mutateMergeDeep(baseForm.state, state)

package/src/metaHelper.ts

@@ -30,6 +30,8 @@ export function metaHelper<
   TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
   TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
   TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
   TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
   TSubmitMeta,
 >(
@@ -42,6 +44,8 @@ export function metaHelper<
     TOnBlurAsync,
     TOnSubmit,
     TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
     TOnServer,
     TSubmitMeta
   >,

package/src/types.ts

@@ -10,7 +10,13 @@ export type ValidationSource = 'form' | 'field'
  * "server" is only intended for SSR/SSG validation and should not execute anything
  * @private
  */
-export type ValidationCause = 'change' | 'blur' | 'submit' | 'mount' | 'server'
+export type ValidationCause =
+  | 'change'
+  | 'blur'
+  | 'submit'
+  | 'mount'
+  | 'server'
+  | 'dynamic'
 
 /**
  * @private
@@ -33,12 +39,15 @@ export type ValidationErrorMap<
   TOnBlurAsyncReturn = unknown,
   TOnSubmitReturn = unknown,
   TOnSubmitAsyncReturn = unknown,
+  TOnDynamicReturn = unknown,
+  TOnDynamicAsyncReturn = unknown,
   TOnServerReturn = unknown,
 > = {
   onMount?: TOnMountReturn
   onChange?: TOnChangeReturn | TOnChangeAsyncReturn
   onBlur?: TOnBlurReturn | TOnBlurAsyncReturn
   onSubmit?: TOnSubmitReturn | TOnSubmitAsyncReturn
+  onDynamic?: TOnDynamicReturn | TOnDynamicAsyncReturn
   onServer?: TOnServerReturn
 }
 
@@ -51,6 +60,7 @@ export type ValidationErrorMapSource = {
   onBlur?: ValidationSource
   onSubmit?: ValidationSource
   onServer?: ValidationSource
+  onDynamic?: ValidationSource
 }
 
 /**
@@ -65,6 +75,8 @@ export type FormValidationErrorMap<
   TOnBlurAsyncReturn = unknown,
   TOnSubmitReturn = unknown,
   TOnSubmitAsyncReturn = unknown,
+  TOnDynamicReturn = unknown,
+  TOnDynamicAsyncReturn = unknown,
   TOnServerReturn = unknown,
 > = {
   onMount?: TOnMountReturn | GlobalFormValidationError<TFormData>
@@ -80,6 +92,10 @@ export type FormValidationErrorMap<
     | TOnSubmitReturn
     | TOnSubmitAsyncReturn
     | GlobalFormValidationError<TFormData>
+  onDynamic?:
+    | TOnDynamicReturn
+    | TOnDynamicAsyncReturn
+    | GlobalFormValidationError<TFormData>
   onServer?: TOnServerReturn
 }
 

package/src/utils.ts

@@ -1,3 +1,5 @@
+import { defaultValidationLogic } from './ValidationLogic'
+import type { ValidationLogicProps } from './ValidationLogic'
 import type { FieldValidators } from './FieldApi'
 import type { FormValidators } from './FormApi'
 import type {
@@ -225,78 +227,6 @@ export interface AsyncValidator<T> {
   debounceMs: number
 }
 
-/**
- * @private
- */
-export function getAsyncValidatorArray<T>(
-  cause: ValidationCause,
-  options: AsyncValidatorArrayPartialOptions<T>,
-): T extends FieldValidators<any, any, any, any, any, any, any, any, any, any>
-  ? Array<
-      AsyncValidator<T['onChangeAsync'] | T['onBlurAsync'] | T['onSubmitAsync']>
-    >
-  : T extends FormValidators<any, any, any, any, any, any, any, any>
-    ? Array<
-        AsyncValidator<
-          T['onChangeAsync'] | T['onBlurAsync'] | T['onSubmitAsync']
-        >
-      >
-    : never {
-  const { asyncDebounceMs } = options
-  const {
-    onChangeAsync,
-    onBlurAsync,
-    onSubmitAsync,
-    onBlurAsyncDebounceMs,
-    onChangeAsyncDebounceMs,
-  } = (options.validators || {}) as
-    | FieldValidators<any, any, any, any, any, any, any, any, any, any>
-    | FormValidators<any, any, any, any, any, any, any, any>
-
-  const defaultDebounceMs = asyncDebounceMs ?? 0
-
-  const changeValidator = {
-    cause: 'change',
-    validate: onChangeAsync,
-    debounceMs: onChangeAsyncDebounceMs ?? defaultDebounceMs,
-  } as const
-
-  const blurValidator = {
-    cause: 'blur',
-    validate: onBlurAsync,
-    debounceMs: onBlurAsyncDebounceMs ?? defaultDebounceMs,
-  } as const
-
-  const submitValidator = {
-    cause: 'submit',
-    validate: onSubmitAsync,
-    debounceMs: 0,
-  } as const
-
-  const noopValidator = (
-    validator:
-      | typeof changeValidator
-      | typeof blurValidator
-      | typeof submitValidator,
-  ) => ({ ...validator, debounceMs: 0 }) as const
-
-  switch (cause) {
-    case 'submit':
-      return [
-        noopValidator(changeValidator),
-        noopValidator(blurValidator),
-        submitValidator,
-      ] as never
-    case 'blur':
-      return [blurValidator] as never
-    case 'change':
-      return [changeValidator] as never
-    case 'server':
-    default:
-      return [] as never
-  }
-}
-
 interface SyncValidatorArrayPartialOptions<T> {
   validators?: T
 }
@@ -314,51 +244,171 @@ export interface SyncValidator<T> {
  */
 export function getSyncValidatorArray<T>(
   cause: ValidationCause,
-  options: SyncValidatorArrayPartialOptions<T>,
-): T extends FieldValidators<any, any, any, any, any, any, any, any, any, any>
+  options: SyncValidatorArrayPartialOptions<T> & {
+    validationLogic?: any
+    form?: any
+  },
+): T extends FieldValidators<
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any
+>
   ? Array<
-      SyncValidator<T['onChange'] | T['onBlur'] | T['onSubmit'] | T['onMount']>
+      SyncValidator<
+        | T['onChange']
+        | T['onBlur']
+        | T['onSubmit']
+        | T['onMount']
+        | T['onDynamic']
+      >
     >
-  : T extends FormValidators<any, any, any, any, any, any, any, any>
+  : T extends FormValidators<any, any, any, any, any, any, any, any, any, any>
     ? Array<
         SyncValidator<
-          T['onChange'] | T['onBlur'] | T['onSubmit'] | T['onMount']
+          | T['onChange']
+          | T['onBlur']
+          | T['onSubmit']
+          | T['onMount']
+          | T['onDynamic']
         >
       >
     : never {
-  const { onChange, onBlur, onSubmit, onMount } = (options.validators || {}) as
-    | FieldValidators<any, any, any, any, any, any, any, any, any, any>
-    | FormValidators<any, any, any, any, any, any, any, any>
-
-  const changeValidator = { cause: 'change', validate: onChange } as const
-  const blurValidator = { cause: 'blur', validate: onBlur } as const
-  const submitValidator = { cause: 'submit', validate: onSubmit } as const
-  const mountValidator = { cause: 'mount', validate: onMount } as const
-
-  // Allows us to clear onServer errors
-  const serverValidator = {
-    cause: 'server',
-    validate: () => undefined,
-  } as const
-
-  switch (cause) {
-    case 'mount':
-      return [mountValidator] as never
-    case 'submit':
-      return [
-        changeValidator,
-        blurValidator,
-        submitValidator,
-        serverValidator,
-      ] as never
-    case 'server':
-      return [serverValidator] as never
-    case 'blur':
-      return [blurValidator, serverValidator] as never
-    case 'change':
-    default:
-      return [changeValidator, serverValidator] as never
+  const runValidation = (
+    props: Parameters<ValidationLogicProps['runValidation']>[0],
+  ) => {
+    return props.validators.filter(Boolean).map((validator) => {
+      return {
+        cause: validator!.cause,
+        validate: validator!.fn,
+      }
+    })
   }
+
+  return options.validationLogic({
+    form: options.form,
+    validators: options.validators,
+    event: { type: cause, async: false },
+    runValidation,
+  })
+}
+
+/**
+ * @private
+ */
+export function getAsyncValidatorArray<T>(
+  cause: ValidationCause,
+  options: AsyncValidatorArrayPartialOptions<T> & {
+    validationLogic?: any
+    form?: any
+  },
+): T extends FieldValidators<
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any
+>
+  ? Array<
+      AsyncValidator<
+        | T['onChangeAsync']
+        | T['onBlurAsync']
+        | T['onSubmitAsync']
+        | T['onDynamicAsync']
+      >
+    >
+  : T extends FormValidators<any, any, any, any, any, any, any, any, any, any>
+    ? Array<
+        AsyncValidator<
+          | T['onChangeAsync']
+          | T['onBlurAsync']
+          | T['onSubmitAsync']
+          | T['onDynamicAsync']
+        >
+      >
+    : never {
+  const { asyncDebounceMs } = options
+  const {
+    onBlurAsyncDebounceMs,
+    onChangeAsyncDebounceMs,
+    onDynamicAsyncDebounceMs,
+  } = (options.validators || {}) as
+    | FieldValidators<
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any,
+        any
+      >
+    | FormValidators<any, any, any, any, any, any, any, any, any, any>
+
+  const defaultDebounceMs = asyncDebounceMs ?? 0
+
+  const runValidation = (
+    props: Parameters<ValidationLogicProps['runValidation']>[0],
+  ) => {
+    return props.validators.filter(Boolean).map((validator) => {
+      const validatorCause = validator?.cause || cause
+
+      let debounceMs = defaultDebounceMs
+
+      switch (validatorCause) {
+        case 'change':
+          debounceMs = onChangeAsyncDebounceMs ?? defaultDebounceMs
+          break
+        case 'blur':
+          debounceMs = onBlurAsyncDebounceMs ?? defaultDebounceMs
+          break
+        case 'dynamic':
+          debounceMs = onDynamicAsyncDebounceMs ?? defaultDebounceMs
+          break
+        case 'submit':
+          debounceMs = 0 // submit validators are always run immediately
+          break
+        default:
+          break
+      }
+
+      if (cause === 'submit') {
+        debounceMs = 0
+      }
+
+      return {
+        cause: validatorCause,
+        validate: validator!.fn,
+        debounceMs: debounceMs,
+      }
+    })
+  }
+
+  return options.validationLogic({
+    form: options.form,
+    validators: options.validators,
+    event: { type: cause, async: true },
+    runValidation,
+  })
 }
 
 export const isGlobalFormValidationError = (