react-hook-form with formatted numeric values
I have an "amount" field which is numeric in my
Since the amounts can grow up to the millions in my case, I want to format the displayed value having a thousand separator for better UX.
I looked for libs for formatting these values, and the best (maintained, easy to use, high popularity) I could find was
I found some attempts, all telling I might need to make my input "uncontrolled".
These are the 2 ways I tried:
https://stackoverflow.com/a/69258165/3045531
https://stackoverflow.com/a/63091512/3045531
My problem is that the actual form value linked to the field in the form's context is not numeric but a string, since it's handling the formatted value there, not the numeric one.
How can I make the form handle the numeric value instead of the formatted one, so my Zod validation won't fail there?
I would prefer not to use
react-hook-formSince the amounts can grow up to the millions in my case, I want to format the displayed value having a thousand separator for better UX.
I looked for libs for formatting these values, and the best (maintained, easy to use, high popularity) I could find was
react-number-formatI found some attempts, all telling I might need to make my input "uncontrolled".
These are the 2 ways I tried:
https://stackoverflow.com/a/69258165/3045531
https://stackoverflow.com/a/63091512/3045531
My problem is that the actual form value linked to the field in the form's context is not numeric but a string, since it's handling the formatted value there, not the numeric one.
How can I make the form handle the numeric value instead of the formatted one, so my Zod validation won't fail there?
I would prefer not to use
coerceStack Overflow
I am trying to use React hook form with NumberFormat without Controller and without ReactDOM.findDOMNode (which is deprecated and discouraged). The following code works
import React from 'react';
i...
import React from 'react';
i...
Stack Overflow
I would like to add on a input a thousand separator using React Hooks but I'm not sure how. I have tried the below code so far and is not working.
Can you please point out what could be the issue a...
Can you please point out what could be the issue a...
Was this page helpful?
