Availity / availity-reactstrap-validation

Easy to use React validation components compatible for reactstrap.
https://availity.github.io/availity-reactstrap-validation/
MIT License
191 stars 70 forks source link

How to get values ​​in input type Number? #219

Closed emin-karadag closed 3 years ago

emin-karadag commented 3 years ago

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.

Ekran Alıntısı

TheSharpieOne commented 3 years ago

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.

emin-karadag commented 3 years ago

@TheSharpieOne I am currently using the parseFloat () function. Actually, I was wondering if I could get the numeric fields directly without using parseFloat ()?

TheSharpieOne commented 3 years ago

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.

emin-karadag commented 3 years ago

okey thank you :)

emin-karadag commented 3 years ago

I just noticed that I couldn't get the value with valueParserin AvRadioGroup. I also put valueParseron the AvRadio elements in the AvRadioGroup but it didn't work.