In my reactjs i am using formik
const formikPaymentForm = useFormik({
initialValues: {
ezidebitAmount: null, // or undefined
},
validationSchema: Yup.object({
ezidebitAmount: Yup.number().nullable(),
}),
and in render
<TextField
name="ezidebitAmount"
label="Ezidebit Amount"
type="number"
autoComplete="off"
error={Boolean(touched.ezidebitAmount && errors.ezidebitAmount)}
helperText={touched.ezidebitAmount && errors.ezidebitAmount}
onChange={formikPaymentForm.handleChange}
value={formikPaymentForm.values.ezidebitAmount}
fullWidth
InputLabelProps={{
shrink: true,
}}
/>
and if i clear the input by deleting from keyboard then onSubmit it gives me the empty string which is not right as i have mentioned it number field
can we somehow set it to nul if i have cleared the value and type is number
i tried this
onChange={(event) => {
const value = event.target.value;
formikPaymentForm.setFieldValue(
'ezidebitAmount',
value === '' ? null : Number(value) // Transform empty string to undefined
);
}}
which is working fine, but i have so many forms in my application and i need a central solution for this