Multiple schemas when using Yup and React form hook? - reactjs

Question

I have a component with 2 forms. 1 for sign in, and 1 for sign up.
const schema = yup.object().shape({
email: yup.string().email(),
password: yup.string().min(4).max(20).required(),
});
export const LoginForm = ({onRequestClose} : Props) => {
const {control, handleSubmit, formState: {errors}} = useForm<IFormInputs>({
resolver: yupResolver(schema),
});
I have a Yup schema which I use in the react form hook resolver. This works for my login form because that only has a email and password
But on the sign up form I also have userName and repeatPassword. The issue is that if I add those properties to the schema the login doesn't work anymore. I think because it tries to validate fields the form doesn't supply but I'm not sure.
How do you add multiple schema's for forms in Yup?

Answer 1

Resolved it by doing this:
const {control: controlLogin, handleSubmit: handleSubmitLogin, formState: {errors: errorsLogin}} = useForm({
resolver: yupResolver(loginSchema),
});
const {control: controlSignUp, handleSubmit: handleSubmitSignUp, formState: {errors: errorsSignUp}} = useForm({
resolver: yupResolver(schemaSignUp),
});

Answer 2

Yes, it's working, I'm used in my project like:
//Yup schema for validation
const editvalidationSchema = Yup.object().shape({
remark: Yup.string().required("Required"),
});
const {handleSubmit: handleSubmitEditRemark, register: reg, formState: {errors: errorsEditRemark}, setValue, clearErrors} = useForm({
resolver: yupResolver(editvalidationSchema),
});
// use
<Form onSubmit={handleSubmitEditRemark(editRemark)}>
<input name="remark" type="text" className={`form-control ${errorsEditRemark.remark ? "is-invalid" : ""}`} defaultValue={data.remark)} autoFocus {...reg("remark")} />
//submit button
<Button type="submit"> Submit </Button>
</Form>