Formik: Ability to reset individual field

[johncmunson]

Similar to the resetForm helper function, it would be great to have a resetField helper. It would accept a path to know which field to reset.

Currently, it doesn't seem possible to achieve this functionality by using connect() or some other method. I tried using _.set() from lodash and passing it a path, my initial value, and the values, errors, and touched objects, but this resulted in some very strange behavior where Formik would get out of sync with the DOM.

[rpanczer]

@johncmunson Did you try to use setFieldValue for what you're doing?

form.setFieldValue(items.${index}.yourFieldName, '')

[johncmunson]

@rpanczer That's a good idea, and I hadn't discovered setFieldValue until you mentioned it. The drawback of using setFieldValue is that you have to keep track of the initial value for each specific field on your own. resetForm is convenient because the initial form values are tracked by formik, so it would just be nice to be able to do this for a single field.

[Andreyco]

But we do keep track of initial values, correct? It is whatever you pass to initialValues

[johncmunson]

I was just thinking that resetField(`foo.bar.${index}.baz`) would be a little more convenient than setFieldValue(`foo.bar.${index}.baz`, initialValues.foo.bar[index].baz)

I think I'll close the issue, but this might be a nice convenience method to add in a future release!

[rohitmalhotra1420]

You can use setFieldValue('fieldName',undefined). This will unregister the field and not return and key value pair in the final form payload on handleSubmit()

[Jazzepi]

@rohitmalhotra1420 I don't think that's what the user is asking for. The idea is to be able to tell Formik "field A should be its initial value" without having to tell it what it's initial value is. What you've offered looks like it disconnects the field from the form.

[wengkitt969696]

I realize that if user use setFieldValue() to reset, it will leave the field touched.

[alkafaiz]

@wengkitt969696 I do workaround this way. pass in the submitted value as nextInitialState for resetForm param. you can override the value that you need to be reset.

resetForm: (nextInitialState?: FormikState<Values>) => void

const handleSubmit = (values, formikApi) => {
    // your own handling

    // reset only selected fields
    formikApi.resetForm({values:{...values, firstName:""}})
  }

[anguyen227]

imo, you can reset back to initial value by accessing the value inside initialValues obj

setFieldValue(name, getIn(initialValues, name), true);

[ChidiOkpala]

@wengkitt969696 I do workaround this way. pass in the submitted value as nextInitialState for resetForm param. you can override the value that you need to be reset.

resetForm: (nextInitialState?: FormikState<Values>) => void

const handleSubmit = (values, formikApi) => {
    // your own handling

    // reset only selected fields
    formikApi.resetForm({values:{...values, firstName:""}})
  }

this worked fine for me, thanks @alkafaiz