@tanstack/form-core 0.18.1 → 0.19.1

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/FormApi.spec.ts

@@ -192,6 +192,70 @@ describe('form api', () => {
     })
   })
 
+  it('should not wipe validators when resetting', () => {
+    const form = new FormApi({
+      defaultValues: {
+        name: 'test',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'name',
+      validators: {
+        onChange: ({ value }) => (value.length > 0 ? undefined : 'required'),
+      },
+    })
+
+    form.mount()
+
+    field.mount()
+
+    field.handleChange('')
+
+    expect(form.state.isFieldsValid).toEqual(false)
+    expect(form.state.canSubmit).toEqual(false)
+
+    form.reset()
+
+    expect(form.state).toEqual({
+      values: { name: 'test' },
+      errors: [],
+      errorMap: {},
+      fieldMeta: {
+        name: {
+          isValidating: false,
+          isTouched: false,
+          isDirty: false,
+          isPristine: true,
+          touchedErrors: [],
+          errors: [],
+          errorMap: {},
+        },
+      },
+      canSubmit: true,
+      isFieldsValid: true,
+      isFieldsValidating: false,
+      isFormValid: true,
+      isFormValidating: false,
+      isSubmitted: false,
+      isSubmitting: false,
+      isTouched: false,
+      isPristine: true,
+      isDirty: false,
+      isValid: true,
+      isValidating: false,
+      submissionAttempts: 0,
+      validationMetaMap: {
+        onChange: undefined,
+        onBlur: undefined,
+        onSubmit: undefined,
+        onMount: undefined,
+        onServer: undefined,
+      },
+    })
+  })
+
   it("should get a field's value", () => {
     const form = new FormApi({
       defaultValues: {

package/src/utils.ts

@@ -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
 }