teslamotors/informed

useFieldApi.getError() not working when using validationSchema with yup.

kyawkyawsoezhu opened this issue · 1 comments

Bug Report

I want to report a bug I found when using validationSchema with yup. It's hard to explain in words, you will understand it quickly if you check it here codesandbox.

I can not get error from useFieldApi.getError(field) if I don't surround form fields with function like this <Form>{()=>()}</Form>

Working

<Form onSubmit={onSubmit} validationSchema={validationSchema}>
{() => (
    <>
        <Text field="username" />
        <ErrorMessage field="username" />
    </>
)}
</Form>

Not Working

<Form onSubmit={onSubmit} validationSchema={validationSchema}>
    <Text field="username" />
    <ErrorMessage field="username" />
</Form>

ErrorMessage component

const ErrorMessage = ({ field }) => {
  const fieldApi = useFieldApi(field);
  return (
    <p>{fieldApi.exists() && fieldApi.getError()}</p>
  );
};

I use
informed 3.34.0
yup 0.32.9

Please try in V4