Set useForm context when invoking handleSubmit

[Edelf]

We have the scenario where the user has the option to save the form, or submit it.
On submit, we want to trigger all the Yup schema validations, but on the save we want to validate all but the "required" condition.

Looking at the documentation, the useForm Context seemed interesting, but would require some sort of synchronous sequence where when the user clicks on save, we first change the context, and then call the handleSubmit.

If the handleSubmit accepted a new context, it would be great, e.g. handleSubmit(onSubmit, {ignoreRequired: true})

Is there a way to achieve this sort of behavior currently?

[leapful]

@Edelf

Option context from useForm() hook already supports passing context object to the resolver, you can add a reference object to store the state of submit or save to put condition on schema validation rules.

Example: https://codesandbox.io/s/resolver-context-d9jqy
Reference: https://react-hook-form.com/docs/useform#context

[Edelf]

@leapful thank you for the reply.
I'm aware of the context, even linked it on my initial question.

What I'm asking for is, what is the proper solution for this example: https://codesandbox.io/s/resolver-context-forked-vsf65c?file=/src/App.tsx

In that example, I'm using the context in order to specify requirements, however setting the state/context at the same time as the handleSubmit lead to weird results.

[leapful]

@Edelf

You don't need to use local state for context, it only the conditional schema on next re-rendering, not on submit. Just use a simple ref from useRef hook is enough.

Working demo: https://codesandbox.io/s/resolver-context-forked-qsmzpc?file=/src/App.tsx

[Edelf]

That's awesome! Thank you very much!
Here is the codesandbox with your answer but my initial nested component: https://codesandbox.io/s/resolver-context-forked-rr3m7x?file=/src/App.tsx