Skip to content
Draft
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/form-core/src/FormApi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1981,6 +1981,7 @@ export class FormApi<
(prev) => [...(Array.isArray(prev) ? prev : []), value] as any,
opts,
)

this.validateField(field, 'change')
}

Expand Down
66 changes: 66 additions & 0 deletions packages/form-core/tests/FieldApi.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2500,4 +2500,70 @@ describe('field api', () => {

expect(field.state.meta.errors).toStrictEqual(['Blur error'])
})

it('should pass errors to pushed fields', () => {
const schema = z.object({ arr: z.array(z.string().min(2)) })

const form = new FormApi({
defaultValues: {
arr: [''],
},
validators: { onChange: schema },
})
form.mount()

const field = new FieldApi({
form,
name: 'arr',
})
field.mount()
field.pushValue('')

expect(form.state.errors).toStrictEqual([
{
'arr[0]': [
{
code: 'too_small',
exact: false,
inclusive: true,
message: 'String must contain at least 2 character(s)',
minimum: 2,
path: ['arr', 0],
type: 'string',
},
],
'arr[1]': [
{
code: 'too_small',
exact: false,
inclusive: true,
message: 'String must contain at least 2 character(s)',
minimum: 2,
path: ['arr', 1],
type: 'string',
},
],
},
])

const fieldIndexed = new FieldApi({
form,
name: 'arr[1]',
})
fieldIndexed.mount()

expect(fieldIndexed.state.meta.errors).toStrictEqual({
errors: [
{
code: 'too_small',
minimum: 2,
type: 'string',
inclusive: true,
exact: false,
message: 'String must contain at least 2 character(s)',
path: ['arr', 1],
},
],
})
})
})
3 changes: 1 addition & 2 deletions packages/react-form/src/useForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,12 @@ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
import type {
AnyFormApi,
AnyFormState,
BaseFormOptions,
FormAsyncValidateOrFn,
FormOptions,
FormState,
FormValidateOrFn,
} from '@tanstack/form-core'
import type { ComponentType, JSX, PropsWithChildren, ReactNode } from 'react'
import type { PropsWithChildren, ReactNode } from 'react'
import type { FieldComponent } from './useField'
import type { NoInfer } from '@tanstack/react-store'

Expand Down
Loading