I'm creating an auth form and I'm referencing the react-hook-form docs on how to use yup to validate my inputs. As far as I can tell, everything is pretty much identical to the implementation provided in the docs. However, I'm getting the error on the useForm
resolver (show below). Any idea where I'm going wrong?
"react-hook-form": "^7.15.2"
"yup": "^0.32.9"
"@hookform/resolvers": "^2.8.1"
interface IFormInputs {
email: string;
password: string;
passwordConfirm: string;
}
const schema = yup.object().shape({
email: yup.string().required(),
password: yup.string().required(),
passwordConfirm: yup.string().required(),
});
const SignUp = (): JSX.Element => {
const {
control,
handleSubmit,
getValues,
formState: { errors },
} = useForm<IFormInputs>({ resolver: yupResolver(schema) });
const onSubmit: SubmitHandler<IFormInputs> = () => {
const values = getValues();
console.log('values', values);
};
return (
<div>
<StyledPaper>
<StyledTypography>Sign Up</StyledTypography>
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="email"
rules={{ required: 'this field is required' }}
defaultValue=""
control={control}
render={({ field }) => (
<TextField
fullWidth
label="Email"
variant="filled"
value={field.value}
error={!!errors.email}
helperText="Provide an email"
{...field}
/>
)}
/>
<StyledButton type="submit">Submit</StyledButton>
</form>
</StyledPaper>
<div>
<StyledTypography>Already have an account? Log in.</StyledTypography>
</div>
</div>
);
};
export default SignUp;
This looks like a library bug, downgrade @hookform/resolvers to 2.8.0
seems to fix the issue.
Edit: You can remove the error on version 2.8.1
by forcing yubResolver
to use the yub.AnyObjectSchema
generic. Thanks to Mihai-github for figuring that out.
useForm<IFormInputs>({
resolver: yupResolver<yup.AnyObjectSchema>(schema),
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments