Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why Hookform resolver makes required fields optional? #683

Open
ritikbanger opened this issue May 16, 2024 · 7 comments
Open

Why Hookform resolver makes required fields optional? #683

ritikbanger opened this issue May 16, 2024 · 7 comments

Comments

@ritikbanger
Copy link

Describe the bug
Hookform Resolver is making types optional.

To Reproduce
Steps to reproduce the behavior:

export const loginValidationSchema = () =>
	yup.object().shape({
		email: yup
			.string()
			.trim()
			.required("email_req")
			.email("email_invalid")
			.matches(EMAIL_REGEX, "email_invalid"),
		password: yup.string().required("pass_req"),
		rememberMe: yup.boolean().required(),
	});

export interface ILogin {
	email: string;
	password: string;
	rememberMe: boolean;
}

	const {
		control,
		handleSubmit,
		setValue,
		formState: { errors },
	} = useForm({
		mode: "onChange",
		resolver: yupResolver<ILogin>(loginValidationSchema()),
	});

In the onSubmit of form I get:

handleSubmit((data) => {onSubmit(data);})

The type that gets resolved is:

data: {
    rememberMe?: boolean;
    email?: string;
    password?: string;
}

This is because the type that get resolved here is:

resolver?: Resolver<{
    rememberMe?: boolean;
    email?: string;
    password?: string;
}, any>

Codesandbox link (Required)
Include a codesandbox will help us to investigate the issue quicker.

Expected behavior
The type should be inferred as required and not optional which is

 interface ILogin {
	email: string;
	password: string;
	rememberMe: boolean;
}

Screenshots
image

image

image

Desktop (please complete the following information):

  • OS: [e.g. iOS] Ubuntu
  • Browser [e.g. chrome, safari] Chrome
  • Version [e.g. 22] Version "@hookform/resolvers": "^3.4.0", "yup": "^1.4.0", "react-hook-form": "^7.51.4",
@ritikbanger
Copy link
Author

Any update on this?

@jorisre
Copy link
Member

jorisre commented Jul 2, 2024

Can you please provide an updated Codesandbox with your issue?

@ritikbanger
Copy link
Author

simply hover on the methods like resolver to know what is wrong. I have screenshots attached of what method to hover on.

@jorisre
Copy link
Member

jorisre commented Jul 3, 2024

I need a reproducible example to help you. Can you provide a Codesandbox or more details?

@ritikbanger
Copy link
Author

@jorisre
Copy link
Member

jorisre commented Jul 3, 2024

Your CSB is not using the same version of RHF and resolvers as described in your issue. Please ensure consistency.

@ritikbanger
Copy link
Author

This problem occur only when we don't use register and use controlled components by using control. I will share a CSB with control implementation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants