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