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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
isValid behavior #1133
Comments
Thanks for taking the time to write this up. I agree this is a bit awkward. I think this is a symptom of not having
|
That would indeed help but this is assuming the That's what my workaround did and it fits our use case very well. I'd be happy to submit a PR if you think that's a good idea. I understand that this is a breaking change since the previous behavior of |
This is a big problem for me as well. I have lots of forms you can open and close, and the UI needs to maintain the form values that were entered when switching between forms. Currently valid forms have their submit cleared. I don't understand why there is the option to hardcode a prop for if the form is valid or not on init. A callback I could understand, but this actually seems really hacky and completely inconsistent with how you'd expect a form to function. Instead there should be |
Same problem, |
@jaredpalmer @motiazu Is anyone making steps to resolve this? It is quite an annoyance that isValid doesn't work. To me, it makes the most sense if isValid returns true when all the fields are filled out (no errors). I don't understand why isValid uses dirty in its logic. |
@sarahsmo I also don't rely on isValid as its behaviours is inconsistent. Rather I simply use the following to disable my submit button:
|
Hi @mjangir your suggestion looks clear enough but this gives me an error, what exactly are you using as _ ? |
@mpmprudencio lodash or underscore probably. |
I'm using lodash. |
Just ran into this as well. Was quite surprised that if a Without underscore/lodash you could use the plain JS:
I think the approach I'm going with is to extend or wrap Formik into my own
then the usage stays just like normal formik:
**Edit: ** There seemed to be cases where I updated my wrapper around Formik to this:
This does have an issue where on initial render it will try to show the validation messages, so you have to make sure your validation messages are also tied to |
I'm facing the same problem where my forms can have initially invalid values and Formik currently doesn't check initial values for errors. Just to add another workaround that I'm using (inspired by this issue) based on React Hooks (Typescript) in case anyone finds it useful, too: const FormikValidateInitialValues: React.FC<{ form: FormikProps<any> }> = ({ form, children }) => {
React.useLayoutEffect(() => {
form.validateForm()
}, [form.initialValues])
// [form.initialValues] triggers the effect whenever initial values change.
// This is necessary for triggering validation when you switch between the
// same form with different initial values.
return <>{children}</>
}
const MyForm: React.FC<...> = props = (
<Formik ...>
{form => (
<FormikValidateInitialValues form={form}>
...
</FormikValidateInitialValues>
)}
</Formik>
) |
@sisp I eventually found out I could just pass |
@motiazu Do you have a minimal example? This is what I tried and it doesn't work: <Formik ... isInitialValid={props => props.myValidator(props.initialValues) === undefined}>
...
</Formik> Perhaps I misunderstood your suggestion. |
Something along these lines -
I created a wrapped |
The opposite is also true, if you have valid initialValues, change them and submit, and then reenter the original values, you get |
I had the same issue while trying to create a multistep form. I managed to overcome this issue with this approach:
disableNext={values.isSubmitted && _.isEmpty(touched) ? false : !isValid} So basically I'm forcing my Next button to be enabled only if the form is already submitted and no field is touched. Otherwise it keeps deciding with using isValid. |
@motiazu solution worked for me. Just wanted to add that you can use the I was able to run my validators on mount when I was using the For some reason Edit: actually |
@zanehiredevs This is because the actual validation function does not actually validate if the form isn't dirty, it just uses |
should we wait to the V2 so we can have this update fix ? |
Any update on this? react-final-form seems to do the right thing here. |
v2 fixes this. |
and keeps backwards compat if you already have done stuff with |
Well providing a function right now seems to be a pretty good solution plus it's fixed in v2, I don't think we expect anymore changes to this issue. Closed. |
@jaredpalmer i am on v2.0.1-rc12 . The behavior of 'isValid' still does not take into account the initial values. Maybe I missed something but what is the nature of the fix in v2 ? Or rather is it not in this rc version? |
Shouldn't a bug, especially if important, be fixed/backported on the current major stable version (v1) instead of having to wait/force the upgrade to v2? |
I just had the same problem on version |
When |
Have the same problem as @dspacejs , @jaredpalmer what is the proper solution to fix this? |
Same error as @dspacejs the only way I was able to fix this issue. Is by removing |
@TLadd yes thank you, this is the same issue. Work with useMemo |
Thank you. This is the only thing that I've found that prevented an issue with |
Only way it works for me: <Formik
validateOnMount={true}
initialValues={useMemo(() => { return { email: '' } }, [])}
... |
馃悰 Bug report
Current Behavior
When initializing a form with initialValues,
isValid
state is determined byisInitialValid
.If a user did not set isInitialValid, it will still be applied with
false
.Even if the values have changed but still return (after multiple edits) back to the same
initialValues
, the form is deemed not dirty and the error object is ignored in deciding the validity.Expected behavior
If I decided not use
isInitialValid
explicitly, I expect the validity of the form to be decided by theerrors
object only.If form is dirty or not, I want to
errors
to determine validity.Reproducible example
https://codesandbox.io/s/jn630ymxjv
Notice how the initial value of
id
isGOOD_INPUT
, and how any value that isn't empty orGOOD_INPUT
is accepted even thoughGOOD_INPUT
is good input.Suggested solution(s)
I would suggest to not default
isInitialValid
to false, or add a prop to indicate whether I want it to determine my validation.isInitialValid
by itself is a pretty simple solution but it puts a lot more work on the dev. When using Formik I can just provide a Yup schema and the lib handles the rest, unless I set a possibly valid initial value ;(In which case I will have to trigger my own validation, handle it's async nature by myself just to get the initialValue of something the lib gets right in any other case.
For our team I wrapped Formik and overriden the calculation of isValid, and triggered initial render on mount (we don't use SSR, I've seen this solution suggested in one of the issues). This helps avoid whatever boilerplate manual pre-validation we would have to do pretty much for every Formik use.
Edit: Since writing this I managed to create a better solution here
Your environment
The text was updated successfully, but these errors were encountered: