I have been working on a form and been using Formik. For some reason all the props like errors and values are being passed but touched is not working. I am assuming that touched is not properly set up but I am unsure what would be causing it. I currently have this:
<Formik
initialValues={{date: ''}}
validation={{date: Yup.string().required('some error')}}
onSubmit={(values) => { console.log(values) }}
>
{({ errors, touched, values, setFieldValue }) => {
<form onSubmit={handleSubmit}>
...
<DatePicker
id="date"
name="date"
value={values.date}
errors={errors.date}
touched={touched.date}
onChange={setFieldValue}
/>
<button type='submit'>Submit</button>
</form>
}}
</Formik>
I have been checking the prop values being sent in and the only thing that is not working is touched as it is undefined. Did I configure the date picker incorrectly here? I am getting everything else and I am able to set the value but touched is never set. I have other fields similar to this as well but is working fine. What could be causing this issue?
I managed to fix this by passing the handleBlur handler to the DatePicker component
onBlur={handleBlur}
Related
I have the following field with a RHF controller and a MUI Textfield:
<Controller
control={control}
name="name"
defaultValue=""
rules={{
required: true,
minLength: 3,
maxLength: 300,
validate: wtf,
}}
render={({ field, fieldState: { error } }) => (
<TextField
{...field}
fullWidth
label="Name"
size="small"
helperText={formState?.errors?.name?.message}
error={error !== undefined}
/>
)}
/>
The wtf method isn't getting called on input change. I've tried with different revalidate modes but this is just not firing at all. Am I missing something here? I've checked examples and tutorials and they all seem to do it this way.
I created a sandbox here and it works perfectly.
I only had to add {mode: "onChange"} inside the useForm method call and return a string if the validation function failed.
I based my improvements in the documentation for register options as it is recommended here in the rules section of the Controller component.
Feel free to ask for any further help.
-Ado
I am using Formik forms in react project. I have the following code inside <Formik><Form>
<Field name="zip" validate={some validation is here}>
<input {...fieldProps.field}
id="zip"
name="zip"
className="form-control"
placeholder="zip"
required={true}
maxLength={5}
onKeyDown={(event) => this.onZipChange(event)}/>
</Field>
<ErrorMessage name="zip" render={msg => <div>{msg}</div>} />
When form is rendered, I make changes to the input, for example, remove one number from zip, so in props.formProps.errors errors` texts appear, but ErrorMessage is not displaying. After I click to any places of the page it appears, and then it continue working as expected: on key down it display ErrorMessage if any errors in zip, and hide if zip is valid.
The problem is only for the first time when form is rendered.
Any ideas, what can cause the issue?
This is expected behavior. <ErrorMessage /> is only displayed when both of the following conditions are fulfilled:
There is an error message for the given field
That field's touched property is true
By default, Formik will set touched to true on blur. So this is why the error message only displays when you click outside the input.
If you want to force the error message to appear even before the blur, you may manually set the input's touched property to true. This may be done multiple ways but the simplest is via initialTouched prop on <Formik />. If the form comes preloaded with data from the backend, you may also want to set validateOnMount prop to true.
For example:
<Formik
validateOnMount
initialTouched={{zip: true}}
>
...
</Formik>
I have a formik field. I need to extract the value from this field and run it through a custom onChange function that changes state based on what the user types in. I'm not great with Formik at all. Some help would be highly apprecieted!
<Formik
initialValues={initialValues}
validationSchema={SetPasswordSchema}
onSubmit={onSubmit}
>
{({ status, isSubmitting, isValid, values }) => (
<Field
name='password'
required
value={values.password}
onChange={handleChange(values.password)}
component={TextField}
placeholder={t('authentication:password')}
type='password'
The formik field can not detect my handleChange function, and it is retruning as undefined. Any solution for this??
You can create a reference to Formik component.
this reference will have methods for doing various operations, from that you can use setFieldValue method to change a particular field.
check sandbox example
I am currently working on a react project. I am using react-final-form for fetching the data in the form. As I am using the material UI component to create the form I am creating the form somewhat like this.
Code
<Form
onSubmit={onSubmit}
validate={validate}
render={({ handleSubmit, values }) => (
<form onSubmit={handleSubmit}>
<FormControl variant="outlined" className={classes.formControl} key={fieldKey}>
<Field
name={field.fieldName}
render={({ input }) => (
<TextField
{...input}
className={classes.textField}
variant="outlined"
label={props.field.label}
placeholder={props.field.description}
required={props.field.isMandatory}
InputLabelProps={{
shrink: true,
}}
/>
)}
type="text"
/>
</FormControl>
</form>
)}
/>
Now as soon as I remove the input props from the render props it is working fine. but with the input props, it delays in taking input. Without input props, I could not fetch the value from the form.
Is there any way to resolve this time delay?
Thanks in advance.
If you want a simple field. Maybe you can pass on only essential props.
<TextField
name={input.name}
value={input.value}
onChange={input.onChange}
/>
The solution to this is subscriptions.
The form is initially rendered on every action, react-final-form allows to handle subscription,
<Form subscription={{handeleSubmit: true}} ...> </Form>
We can do somewhat like this
There is a video link for this. Video
Hope you find this helpful 😉
Can't seem to find a reason why the first approach works, and the second doesn't.
Works: pastebin
Doesn't: pastebin
The difference between these two is that there's <TextField> in the second one instead of <div> and <Field>. But the examples I've seen makes the <TextField> work just fine, what am I missing?
You have to pass the component to <Field />:
<Field component={TextField} name="password">
You are now trying to use it like so:
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
render={props => (
<Form>
<TextField
id="name"
name="name"
label="Name"
value={props.values.name}
onChange={props.handleChange}
fullWidth
/>
</Form>
)}
/>
... Which should work, are you getting any errors in the console?
If that doesn't work for some reason you can try doing it via Field render props.
This snippet is taken from the Formik docs.
<Formik
...
<Field
name="lastName"
render={({ field }) => (
<input {...field} placeholder="password" />
)}
/>
...
/>
You see you can use a render props to the Field component to render a custom component if you like.
There are 3 ways to render things with <Field>.
Aside from
string-only component, each render prop is passed the same props for
your convenience.
Field's render props are an object containing:
field: An object containing onChange, onBlur, name, and value of the
field form: Formik state and helpers Any other props passed to field
See more in Formik docs here.