T
TanStack2mo ago
automatic-azure

What onDynamic really do? reading the docs, still don't understand when onDynamic called

import { revalidateLogic, useForm } from '@tanstack/react-form'

function App() {
const form = useForm({
defaultValues: {
firstName: '',
lastName: '',
},
validationLogic: revalidateLogic(),
validators: {
onChange: ({ value }) => {
if (!value.firstName) {
return { firstName: 'A first name is required' }
}
return undefined
},
onDynamic: ({ value }) => {
if (!value.lastName) {
return { lastName: 'A last name is required' }
}
return undefined
},
},
})

return (
<div>
<p>{form.state.errorMap.onChange?.firstName}</p>
<p>{form.state.errorMap.onDynamic?.lastName}</p>
</div>
)
}
import { revalidateLogic, useForm } from '@tanstack/react-form'

function App() {
const form = useForm({
defaultValues: {
firstName: '',
lastName: '',
},
validationLogic: revalidateLogic(),
validators: {
onChange: ({ value }) => {
if (!value.firstName) {
return { firstName: 'A first name is required' }
}
return undefined
},
onDynamic: ({ value }) => {
if (!value.lastName) {
return { lastName: 'A last name is required' }
}
return undefined
},
},
})

return (
<div>
<p>{form.state.errorMap.onChange?.firstName}</p>
<p>{form.state.errorMap.onDynamic?.lastName}</p>
</div>
)
}
3 Replies
deep-jade
deep-jade2mo ago
revalidateLogic configures when it is called and how it changes after a submission attempt the default is submit and change so on first changes, it does not get called. After the first submission attempt that failed, it is called on change
eastern-cyan
eastern-cyan2mo ago
it's a very useful UX config and is much better than only re-evaluating on submit in most forms. There are some forms where you only want to revalidate on submit. and forms where you must immediately validate on change. you get to pick which one suits you best
automatic-azure
automatic-azureOP2mo ago
just try it, i understand it now, thank you.

Did you find this page helpful?