How to get values in input type Number?
Closed this issue · 5 comments
Hello,
I want to receive number type inputs as numbers, not strings, how can I do?
Current output. However, this is not true. Fields with numbers are an input type number. But the output comes as a string.
You can use valueParser. It allows you to parse the user's input into the internal value which get validated and is used to build the object you output. Things are strings by default since that is how HTML defines them.
If you want certain ones to be a number, you can use valueParser={window.parseInt} or valueParser={window.parseFloat} if you need decimals.
Check out this example: https://stackblitz.com/edit/reactstrap-validation-v2-onbhza?file=Example.js
Note: As mentioned about, valueParse is used to get the value used for validation, this mean that the value given to valueParse has not been validated, please keep that in mind. Also, the value that is returned from valueParse is what gets validated, which can be different from the user's input.
For instance, user enters 1.7 with max="1" is invalid since 1.7 is larger than 1. But 1.7 with max="1" valueParser={parseInt} would be valid since parseInt would turn 1.7 into 1 before validation and 1 is not greater than 1.
@TheSharpieOne I am currently using the parseFloat () function. Actually, I was wondering if I could get the numeric fields directly without using parseFloat ()?
The easiest thing would be for you to create a helper component within your project so you don't have to do parseFloat every time.
export const NumberField = props => <AvField type="number" {...props} valueParser={window.parseFloat} />;Then you can import and use NumberField as it if was AvField with the only difference being that the value will be a legit number in the values object.
okey thank you :)
I just noticed that I couldn't get the value with valueParser in AvRadioGroup. I also put valueParser on the AvRadio elements in the AvRadioGroup but it didn't work.