Can't set 'touched' to true

Question

I just trying to create a custom Formik <Field />. It is a <input type = file /> with opacity=0 and depending of values i styling my <Error /> component and <input type = text />. values.photo is ok. The problem is that touched never becoming true, so i can't show my <Error /> component. Can you explain what goes wrong? https://codesandbox.io/s/purple-violet-qgxr3?file=/src/components/FileInput.js

Demiurge

Answer 1

in your file input component just add this:

form.setTouched({...form.touched,[field.name]: true });

setTouched take object of fields and field.name is the file input name.

Meissner

It works not proper, i added one more input to show it. I faced this problem before. When i called setTouched it overwrite all 'touched' object – Demiurge

if you have multiple input just pass form.touched with the object and assign the field you want check edited aswer. – Meissner

Ah, can you show some code please? I'm new in Formic – Demiurge

I've tried to save object form.touched to local state and then to add to this object new property: [field.name]:true and pass it to setTouched. But it seems that in some moment form.touched became undefined and again i overwrite. It is so tricky for me – Demiurge

what do you mean save form.touched in local state ? you can access it from props . – Meissner

Answer 2

Formik provides a function called setFieldTouched which can be used to set the touched value for specific field manually

setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean)

Joliejoliet

Answer 3

when you handle the file input by listening to onChange event. As soon as that onChange method is called you can mark your field asTouched by calling .markAsTouched() so that it would show the error if the condition in validated.

Diver

Are you sure that .markAsTouched() is a Formik function? I cant find it in the documentation. – Penitent

That's not part of Formik – Spondylitis