Reset inputs after submit form
Opened this issue · 3 comments
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
@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: