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

Quiet reset of form fields #23

Closed
artkravchenko opened this issue Nov 2, 2016 · 7 comments

Comments

@artkravchenko
Copy link
Contributor

@artkravchenko artkravchenko commented Nov 2, 2016

Hello,
Few months before, I reported that form.onValues() doesn't cause form validation: #12
Now I'd like to reset fields of form without any validation when, for example, I submit data and the request succeeds - I wouldn't like to see error messages.

Is it possible to avoid validation in such situations?

Assumption:
I see at least four ways to achieve this effect:

  • pass to the form additional validate functions to work sequentially. One of them can be prevalidator and somehow transfer validation process to next validators with special flag that means not to validate more. (it is monstrous but doesn't require any changes to react-inform)
  • implement form.clear() method (dislike)
  • add optional parameter to form.onValues(fields): form.onValues(fields, needValidate = true) (more suitable - gives more opportunities)
  • add flag to form, such as form.needValidate that can be affected (changed) from wrapped from and from outside and always stops validation for all changes in the form. (most flexible)

What do you think about this feature?

@theadam

This comment has been minimized.

Copy link
Owner

@theadam theadam commented Nov 8, 2016

@Oopscurity This use case makes a lot of sense. Maybe it would be nice to allow the user to control the touched state of each field somehow. I will look into the code a bit, thanks!

@bryceott

This comment has been minimized.

Copy link

@bryceott bryceott commented Dec 8, 2016

Just ran into the same exact scenario. On successful form submission, I would like to clear the form so it can't be easily resubmitted. Calling form.onValues({}) does indeed clear the form, but then also enabled error messages on fields not valid with an empty value. It seems like being able to reset the touched and perhaps even the errors states would indeed be the best solution.

@theadam

This comment has been minimized.

Copy link
Owner

@theadam theadam commented Dec 12, 2016

Yeah, this issue hit me as well and I had to hack around it. I think to provide an imperative api to affect the touched state of the fields would work in certain situations (like this.props.form.setTouched({ field: false, ...}) for instance). This could be implemented quickly without changing anything else.

I however, usually control my form's state from the top level (passing in onChange and value props). In this instance, obviously, refs could be used, but a controlled prop-based approach would be a bit more clean. If this use-case does not affect either of you, we can implement the first approach now (this.props.form.setTouched or another recommendation), and I can come back to revisit my specific use-case.

@softelos

This comment has been minimized.

Copy link

@softelos softelos commented Jan 2, 2017

I have this issue too, I need to reset the form with no validation messages. Doing form.onValues({}); shows the errors. Not good.

@softelos

This comment has been minimized.

Copy link

@softelos softelos commented Jan 8, 2017

Any news on this?

@theadam

This comment has been minimized.

Copy link
Owner

@theadam theadam commented Jan 9, 2017

@softelos I am planning on adding the ability to change the inner 'touched' state on each field in the form.

I would like to do this by adding props a user can use outside of a controlled form (something like touchedValue and onTouchChange props a user can pass in) and with methods on the form/field props passed to the @form wrapped form component. This will provide some flexibility and allow a user to basically reset the touched value for any field. This should work for users that use forms as controlled components, and for those that just let forms manage their own internal state.

I have not gotten around to working on this yet, but that is the plan. There is no ETA yet for when this will be completed, and I would definitely accept a PR if you are interested.

@theadam

This comment has been minimized.

Copy link
Owner

@theadam theadam commented Jan 27, 2017

@softelos @Oopscurity @bryceott PR #26 should solve this issue. It adds a few methods on the form prop as well as the ability to pass in the touched state of the fields as a prop to the form. Take a look if you want. I plan on merging mid next week.

@theadam theadam closed this in #26 Feb 3, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.