Estoy usando MUI y Formik para crear formularios. Necesito cambiar el formato de los números en todas las entradas:

1000.00 -> 1.000,00

Una función creada formatNumber(num) para hacer esto, funciona. Pero el problema es que devuelve una cadena y mi número de espera de API (no puedo hacer nada con eso). Intenté usar el formato de número de reacción pero también devuelve una cadena.

Así que también hice la función parseNumber(str) para analizar el número formateado de cadena a número. Ahora necesito usar esta función antes de enviar el formulario, y no sé cómo hacerlo correctamente. El objetivo es que el usuario siempre vea datos formateados en las entradas. Pero después de enviar el formulario, estos datos deben enviarse al servidor como un número.

Aquí está mi código:

 //"12345678.09" to "12.345.678,09" export const formatNumber = (num: number | null): string => { const formatNum = num ? new Intl.NumberFormat() .format(num) .replaceAll(",", "_") .replaceAll(".", ",") .replaceAll("_", ".") : ""; return formatNum; }; // "12.345.678,09" back to "12345678.09" export const parseNumber = (str: string | null): number | null => { if (str !== null) { str = str.trim(); let result = str.replace(/[^0-9]/g, ""); if (/[,.]\d{2}$/.test(str)) { result = result.replace(/(\d{2})$/, ".$1"); } return parseFloat(result); } else { return null; } }; <Formik initialValues={initialValues} onSubmit={onSubmit} > <Form noValidate onSubmit={handleSubmit}> <TextField name=“some_value” type="string" value={formatNumber(values.some_value)}// here I format data that I get from server, the user should change it in the field and send back to server /> </Form> <Formik>