0
174
Viewsreact hook forms is showing me incorrect (0) characters entered in text field and then correct field length on second click of submit
I am using getValues with react-hook-form and then trying to render the length of the characters of the text field in an error message when user goes over the limit. I am seeing 0/1046 characters when i click submit the first time then the second time I see the correct number.
const titleValue = getValues('title')
const descriptionValue = getValues('description')
<TextField
name='title'
defaultValue=''
label='Title*'
control={control}
css={{}}
help={
errors.title?.type === 'required' || errors.title?.type === 'maxLength'
? errors.title.message
: undefined
}
aria-label='title'
rules={{
required: { value: true, message: 'Required' },
maxLength: {
value: 1024,
message: `${titleValue?.length || 0}/1024 maximum character length exceeded`,
},
}}
/>
·
Juan Pablo Isaza
2 answers
Answer question0
react-hook-form provided an answer https://github.com/react-hook-form/react-hook-form/discussions/7668
validate: (value) => {
if (value.length >= 10) {
// this will give you the correct value for your error message
return `Please, enter a title with less than 10 characters (${value.length}/10)`;
}
}
}}```
·
Juan Pablo Isaza
Report
0
Please refer to useForm - getValues
An optimized helper for reading form values. The difference between watch and getValues is that getValues will not trigger re-renders or subscribe to input changes.
Where as useForm - watch seems to fit your needs more.
This will watch specified inputs and return their values. It is useful for determining what to render.
const titleValue = watch('title')
·
Juan Pablo Isaza
Report
Answer question