@tanstack/form-core 0.10.3 → 0.11.0

package/src/tests/FieldApi.spec.ts

@@ -207,9 +207,11 @@ describe('field api', () => {
     const field = new FieldApi({
       form,
       name: 'name',
-      onChange: (value) => {
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onChange: ({ value }) => {
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -235,10 +237,12 @@ describe('field api', () => {
     const field = new FieldApi({
       form,
       name: 'name',
-      onChangeAsync: async (value) => {
-        await sleep(1000)
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onChangeAsync: async ({ value }) => {
+          await sleep(1000)
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -266,11 +270,13 @@ describe('field api', () => {
     const field = new FieldApi({
       form,
       name: 'name',
-      onChangeAsyncDebounceMs: 1000,
-      onChangeAsync: async (value) => {
-        await sleepMock(1000)
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onChangeAsyncDebounceMs: 1000,
+        onChangeAsync: async ({ value }) => {
+          await sleepMock(1000)
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -302,10 +308,12 @@ describe('field api', () => {
       form,
       name: 'name',
       asyncDebounceMs: 1000,
-      onChangeAsync: async (value) => {
-        await sleepMock(1000)
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onChangeAsync: async ({ value }) => {
+          await sleepMock(1000)
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -333,9 +341,11 @@ describe('field api', () => {
     const field = new FieldApi({
       form,
       name: 'name',
-      onBlur: (value) => {
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onBlur: ({ value }) => {
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -361,10 +371,12 @@ describe('field api', () => {
     const field = new FieldApi({
       form,
       name: 'name',
-      onBlurAsync: async (value) => {
-        await sleep(1000)
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onBlurAsync: async ({ value }) => {
+          await sleep(1000)
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -393,11 +405,13 @@ describe('field api', () => {
     const field = new FieldApi({
       form,
       name: 'name',
-      onBlurAsyncDebounceMs: 1000,
-      onBlurAsync: async (value) => {
-        await sleepMock(10)
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onBlurAsyncDebounceMs: 1000,
+        onBlurAsync: async ({ value }) => {
+          await sleepMock(10)
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -430,10 +444,12 @@ describe('field api', () => {
       form,
       name: 'name',
       asyncDebounceMs: 1000,
-      onBlurAsync: async (value) => {
-        await sleepMock(10)
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onBlurAsync: async ({ value }) => {
+          await sleepMock(10)
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -464,10 +480,12 @@ describe('field api', () => {
     const field = new FieldApi({
       form,
       name: 'name',
-      onSubmitAsync: async (value) => {
-        await sleep(1000)
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onSubmitAsync: async ({ value }) => {
+          await sleep(1000)
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -493,13 +511,15 @@ describe('field api', () => {
     const field = new FieldApi({
       form,
       name: 'name',
-      onBlur: (value) => {
-        if (value === 'other') return 'Please enter a different value'
-        return
-      },
-      onChange: (value) => {
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onBlur: ({ value }) => {
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
+        onChange: ({ value }) => {
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -527,9 +547,11 @@ describe('field api', () => {
     const field = new FieldApi({
       form,
       name: 'name',
-      onChange: (value) => {
-        if (value === 'other') return 'Please enter a different value'
-        return
+      validators: {
+        onChange: ({ value }) => {
+          if (value === 'other') return 'Please enter a different value'
+          return
+        },
       },
     })
 
@@ -551,7 +573,7 @@ describe('field api', () => {
     interface Form {
       name: string
     }
-    const form = new FormApi<Form, unknown>()
+    const form = new FormApi<Form>()
 
     const field = new FieldApi({
       form,
@@ -625,7 +647,10 @@ describe('field api', () => {
     const field = new FieldApi({
       form,
       name: 'firstName',
-      onSubmit: (v) => (v.length > 0 ? undefined : 'first name is required'),
+      validators: {
+        onSubmit: ({ value }) =>
+          value.length > 0 ? undefined : 'first name is required',
+      },
     })
 
     field.mount()
@@ -633,4 +658,66 @@ describe('field api', () => {
     await form.handleSubmit()
     expect(field.getMeta().errors).toStrictEqual(['first name is required'])
   })
+
+  it('should show onMount errors', async () => {
+    const form = new FormApi({
+      defaultValues: {
+        firstName: '',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'firstName',
+      validators: {
+        onMount: ({ value }) =>
+          value.length > 0 ? undefined : 'first name is required',
+      },
+    })
+
+    form.mount()
+    field.mount()
+
+    expect(field.getMeta().errors).toStrictEqual(['first name is required'])
+  })
+
+  it('should cancel previous functions from an async validator with an abort signal', async () => {
+    vi.useRealTimers()
+    const form = new FormApi({
+      defaultValues: {
+        firstName: '',
+      },
+    })
+
+    let resolve!: () => void
+    const promise = new Promise((r) => {
+      resolve = r as never
+    })
+
+    const fn = vi.fn()
+
+    const field = new FieldApi({
+      form,
+      name: 'firstName',
+      validators: {
+        onChangeAsyncDebounceMs: 0,
+        onChangeAsync: async ({ signal }) => {
+          await promise
+          if (signal.aborted) return
+          fn()
+          return undefined
+        },
+      },
+    })
+
+    field.mount()
+
+    field.setValue('one', { touch: true })
+    // Allow for a micro-tick to allow the promise to resolve
+    await sleep(1)
+    field.setValue('two', { touch: true })
+    resolve()
+    await sleep(1)
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
 })

package/src/tests/FieldApi.test-d.ts

@@ -29,10 +29,12 @@ it('should type onChange properly', () => {
   const field = new FieldApi({
     form,
     name: 'name',
-    onChange: (value) => {
-      assertType<'test'>(value)
+    validators: {
+      onChange: ({ value }) => {
+        assertType<'test'>(value)
 
-      return undefined
+        return undefined
+      },
     },
   })
 })
@@ -47,10 +49,12 @@ it('should type onChangeAsync properly', () => {
   const field = new FieldApi({
     form,
     name: 'name',
-    onChangeAsync: async (value) => {
-      assertType<'test'>(value)
+    validators: {
+      onChangeAsync: async ({ value }) => {
+        assertType<'test'>(value)
 
-      return undefined
+        return undefined
+      },
     },
   })
 })