Reset inputs after submit form

[andrescas4]

Any way to reset input values after submit?, right now the only way, at least form me, is by using ref.

const cardNum = useRef(null);

   onSubmit = {(values, actions) => {
        if( cardExp.current && cardNum.current && cusAmount.current ) {
            cardNum.current.value = '';
        }
   }}

This works, BUT, if you look the meta object, looks like no errors were setting, so erroredInputs propertie looks like this:

erroredInputs: {
   cardNumber: undefined
   cvc: undefined
   expiryDate: undefined
   zip: undefined
}

And this is a problem because there is no errors to be able of validate again.

By the way, I´m using formik and material UI.

Thanks for this package and if you could give me any advice on this one.

Best regards

[Hopp3r]

@jxom is there any work being done on this or should I take this on?

[jxom]

@Hopp3r - go for it. I would, but I'm a bit jam-packed at the moment.

[Hopp3r]

@jxom I need some help if you have the time. Handling the reset (with Formik's "handleReset function") of the form's input values is as simple as doing:

<Field name="cardNumber">
      { ({ field, form, meta }) => (
           <input { ...getCardNumberProps({
                 onBlur: field.onBlur,
                onChange: field.onChange,
                value: form.values.cardNumber,  //this does the trick for clearing input value
            })}/>
        )}
</Field>

However, I'm still not sure how to clear the errors within react-payment-inputs. We don't have an endpoint exposed to clear errors as far as I know. You can see after a reset, the values for touchedInputs, erroredInputs, and error all maintain their values (as expected since they aren't tied to Formik). Is there a way that exists to alter touchedInputs or erroredInputs to manually change this? Red = values from Formik Blue = values from react-payment-inputs & after reset: