I have multiple forms and I want to know which one of them was visited.
visited or touched don't help because they're about fields, and forcing the user to click one of the fields just for that isn't what I want nor is intuitive.
So is there another way to know if a form was visited?
I'm on redux-form 6.8.0.
Related
I have 10 components displayed as a side nav list items. Each component is a form (Formik, Material, Yup). When the user clicks on one of the items he goes to a corresponding form page, he can fill out the forms but I want to submit the entire data in a single go (all 10 forms at once).
The problem here is as soon as the user navigates from one form to the other the data get lost. I am not sure how to handle it, any leads?
In my view, if you want to submit all form data in one time you should store all data in 10 forms in their parent component. When the user navigates to other pages, your data will be in the parent component. But I think it's not a good way because the parent component stored a lot of data, it causes poor performance. Why do you want to submit all forms at one time?
Have you thought of storing the form data in a store? Then each form submit updates the value in the store and one final submit gathers all the data into one data form element and submits to the server?
I'm looking at the Wizard Form Example from React Final form.
I want to adapt the wizard so that it hides the next button until the inputs in the current steps all have values. Bit stumped on how to achieve this.
What I'm thinking is that it should be possible to check what step currently is active and somehow pull the states of the inputs present on that step. If all of the inputs have values, show the button, otherwise hide it.
The idea is to dynamically check inputs present per step (as they might change during the course of development, so nicer to actually look for the inputs present rather than hardcode checks for specific states and if they have values).
Full example is here:
https://codesandbox.io/s/km2n35kq3v (code for buttons are in Wizard.js on line 73)
How about making the values required (with validation rules) and only showing the button when the form is valid?
See Wizard.js, lines 64, 73, and 74.
This is not 100% ideal since your validation might have more complex rules and you won't be able to get the value from a failed submission marking all the fields as touched, but it's close.
Let's say we want to create a new Task. We have 2 categories of information we want to collect from the user for creating a new Task: general params, action params.
To make it easily separated we are separating between them with tabs. so each gets its own react component, both stored in different react-tabs tabs.
In the parent component I have a save button and I want that at any given time, the user could click it to send the entire state from both the tabs' state to the server.
While I could forward event handlers from the parent to the children (as suggested by other questions on this topic)... doing it for each of the 20 controls (dropdowns, textfields, date time pickers) in each of them requires a lot of boilerplate code and seems unreasonable.
I'm looking for a best practice for this situation. Thanks!
I have to implement a wizard, where each step is a single input field.
Everything is wrapped inside an accordion with section headers.
The user, after filling the input and pressing Enter, should navigate the wizard field by field. Only the current field is editable, while the other ones are readonly (the user can anytime change a previously filled input, by clicking it, moving the current pointer to it).
I was wondering what could be the best approach to design this system, considering that the whole wizard structure changes in dependence of different user inputs.
I have found a tutorial using ui-router (http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router), with a fixed number of steps, but my requirements are to show the current input edit box inside the accordion, not in a fixed "ui-views" placeholder.
Take a look at https://github.com/JustMaier/angular-autoFields-bootstrap
It's a module that allows you to render forms from Metadata. So essentially, you can change the Metadata you provide dynamically to change the forms.
Is there any way to know the current value of a checkbox in wicket before any action takes place?
wantOnSelectionChangedNotifications() is not useful for me, I want to know the value of the checkbox before clicking on it.
Thanks
first of all in the server you cannot know the state of the input with out a form.
use AjaxFormComponentUpdatingBehavior or AjaxFormSubmitBehavior to attach the event to the checkbox and submit their form. with this aproach you going to submit all components inside the form, if you just want the value of the check you could use a nested form(wicket include support for it)