What is the simplest way to force a formik form to show fields in error?
I would like to this for a react storybook to show what our form looks like when a field has an error in it.
Each field in my form will only display an error if it has been touched and its value is not valid.
I can set the initial value of the fields but I can't figure out how to mark then all as touched so that the errors are displayed.
The Formik test for ErrorMessage might be of some use.
Note the use of setFieldError and setError
I managed this by setting initialErrors and initialTouched for the fields I wanted to display the error state for, in addition to setting initialValues.
In the Formik docs:
https://formik.org/docs/api/formik#initialerrors-formikerrorsvalues
https://formik.org/docs/api/formik#initialtouched-formiktouchedvalues
eg.
<Formik initialValues={} initialErrors={} initialTouched={}>...</Formik>
This worked in stories using both a decorator Formik component wrapper as well as the storybook-formik addon.
Related
I hope you're all well, I'm here with this message to express a concern, a problem that I've encountered. I use autoCompletion from materiall-ui combined with formik in reactjs.
I have trouble filling the autoCompletion field in edit mode, I can't display the exact value in my form so I lose the value of my autoCompletion when I switch from one step to another.
You will have to use initialValue to set value in Autocomplete, formik + materail ui has data binding issues so you can use https://stackworx.github.io/formik-mui/ sample example here https://codesandbox.io/s/formik-material-ui-autocomplete-rishd?file=/index.js:157-169
PS: Please reload sandbox in case of any dependencies error
I want to initialize a dynamic array with delete and add functionality with useForm method from react-hook-form package.
whenever i'm trying to add or delete some inputs in react-hook-form throwing errors for the inputs which have values.
i don't know what i'm missing here. i added my code to CodeSandBox
please have a look and help me to find out solution
I have implemented some form validation in React Semantic UI based on some posts I found on SO - for example, the following:
required={true}
error={this.state.errors["macs"]}
My question is, where are these the React Semantic UI documentation? I haven't had any luck finding it so far.
https://react.semantic-ui.com/collections/form/ - specifically in the Form.Field prop.
Field Variations Required Field shows required in use
States Field Error Label shows the Field with the error property set to show a message with a pointer.
Form error state with Messages shows a Message that displays when the form is in an error state.
I'm getting my inputs dynamically from an API call based on a change in select input, but when I try to add to the initial values of Formik, it always gives me an error ...
Warning: A component is changing an uncontrolled input of type text to be controlled.
And it doesn't help if I set enableReinitialize={true} to Formik.
However, if I generated the inputs from a local JSON or object, the error goes away.
What am I doing wrong here ...
https://codesandbox.io/s/test-dynamic-inputs-with-formik-xr9qg
The form submits fine though.
Better use enableReinitialize={true}. This is official Formik API.
You can check this issue
If anyone is facing the same issue, I just found the solution ...
You have to set value={field.value || ''} in the input inside the TextInput component or whatever type you're using in order to fix this issue.
I had a complex, dynamic form and also came across this issue. There are a few things that I'd recommend for anyone debugging this issue in the future:
Set value for your Field component--like Ruby does above.
Ensure that your Formik component has a uniquely identifying key.
Track and debug your initialValues and ensure that all fields are accounted for. You shouldn't have to set the field value like Ruby does--so long as your initialValues object accounts for all of the fields. However, my form dynamically changed Field components--and Ruby's solution is the only one that worked.
If your form is not dynamic--I think it might be best to check your initialValues object first before implementing Ruby's solution. Formik should be taking care of those values for you--which is why it's such an awesome tool.
i've checked with enableReinitialize={true}. But its not working as much as expected. so wrote a useEffect like
useEffect(() => {
formik.setFieldValue('query_string', active?.query);
}, [active])
it's worked !
Some material-ui components have errorText as a prop which we can use to show errors, But, doing that in react become lot complex if my form has large number of field components.
Please suggest the best way to handle client-side validation with material-ui comonents.
I think your issue is that you have to manage a lot with state/store. In react validation is complex because of one-way binding.
This library https://github.com/vishalvisd/react-validator is one which I found that supports material-ui component validation. Though in general you may use this to validate any component.
I would suggest using some HoC (Higher-order Component) approach. I tested many solutions for form validation in React JS, the one that I always choose is: react-validation-mixin. Take a look at this example.
Example of the standard input:
<input
type='text'
placeholder='Username'
value={this.props.username}
onChange={this.onChange('username')}
onBlur={this.props.handleValidation('username')}
/>
In this example value of that input comes from props (example with Flux implementation) and that's probably what you aim for too (lots of inputs).
onChange will need to handle value change so that this.props.username gets updated too and onBlur will trigger validation check (so that the error will show up once user leaves the input).
In order to get the error message, use: this.props.getValidationMessages('username')
It's a universal solution and you can use it in different libs. But taking TextField from material-ui, as you asked:
<TextField
floatingLabelText="Username"
value={this.props.username}
errorText={this.props.getValidationMessages('username')}
onChange={this.onChange('username')}
onBlur={this.props.handleValidation('username')}
...
/>
Remember to use HoC with your component: export default validation(strategy)(UserLogin) That way, you will get all the necessary helper methods in props.
If you are using Redux in React project, redux-form give you a simple way to implement form validation.
Check this out: http://redux-form.com/6.4.3/examples/syncValidation/