wsmd/react-use-form-state

Question: access to formState in validate methods

shvedovskiy opened this issue · 3 comments

shvedovskiy commented

Hi, I'm trying to validate two custom input fields for the start time and end time. The start time shouldn't be later than the end time and vice versa. When perform custom input validation, I can easily access the values of other input fields, but I cannot get information about their validation status.

This code gives the very first value of a formState object that's not updated:

function Form(eventData) {
  const [formState, { raw }] = useFormState({
    start: eventData.startTime,
    end: eventData.endTime,
  });
  return <>
    <TimePicker 
      {...raw({
        name: 'start',
        validate: (value, values) => {
          if (formState.validity.end !== false) { // <-- validity always undefined
            // ...
          } else {
            // ...
          }
        }
      )} 
    />
    {/* second TimePicker */}
  </>
}

It seems that the assigned validate function relies on closure from the first component render. Is there a workaround for getting the most recent formState object state? Thanks!

davidkrijgsman commented

I'm running into this issue as well. I'm trying to read the errors of other fields in my validate functions but it's always an empty object

  • 👍2
dcousens commented

The validate prop is stale, and is always the validate from the initial render.

Woe is the time I wasted on this. :(

wsmd commented

Thanks y'all! This issue should be resolved in v0.12.0 (now on npm)! 🎉

Closing this for now. Please let me know if you're still having this problem.

  • ❤️1