Form fields of type number show as text input in data bindings

It looks like if i create almost any form that has a bunch of inputs with type=“text” or type=“number” the data bindings panel sees all types as text and can not differentiate the number fields?

Hello Paul,
Can you provide a screenshot of where do you see this?

Hope this helps a little



It’s not a bug, but the data returned from form inputs is always type string … it does not matter what the input type on the page is. When you set input type=“number” then these input field don’t accept non numeric input but at the same time it doesn’t make the input value type “number”.
You can see the specs here: https://www.w3.org/TR/html5/forms.html#number-state-(type=number)

Ok so although that makes sense i suppose, my issue is that because it sees all fields as text, the data formatter options are all missing the number operations, so i have to make it number as it defaults to text.
Maybe once you are aware of this it is very easy but if you are not and are just expecting the formatter to show options based on selection then it might get very confusing.

I have made a quick video of 3 different tests based on a single form
Number 1 will have an input of 5
Number 2 will have an input of 8

  • Answer for test 1 will be 5 + 8 = 13 which works

  • Answer for test 2 will be 5 + 8² = 69 which firstly you will note I have ho option for numeric operations until I use toNumber() as a conversion and then it still does not work, because i assume it breaks it trying to convert a number into a number

  • Answer for test 3 will give the correct answer of 69 by altering the field kind to number manually and getting the numeric operators without the need of toNumber()

As I say though, for me this is not a problem to do manually but I think to a generalised user just starting out it is going to cause a lot of confusion and forum explanation, so if it can be done differently then maybe it should.

testdataformatter.mp4 (31.7 MB)

I am not sure if i explained this well in my previous post but i’ll try again - we do not do any conversion of the data type returned from the HTML form fields. They return strings, as this is how the HTML works.

The formatter options you see are just right - you have the option to convert this HTML input value (which is a string) to a number using the toNumber formatter option. You can convert any of the HTML input values to number and do math with them.

That is why we have the toNumber formatter. So it converts strings to number first and then you can apply calculations.

So just use the toNumber first and then you will see the numeric formatters being allowed after that.

You explained it well Teodor, and I really do understand what you are saying, for me it is not an issue and i will change the type or kind from text to number as i did in the video, I just honestly think that for a user just opening Wappler and trying something out without knowing this off hand then it might cause confusion.

@George in the video i show my step of using the toNumber() formatter option which does not work in this case, I have to set the type or kind to number to get the numeric formatter options as my input is already a number so toNumber() does not seem to do the trick. Also if I add toNumber() and go out and back in to the formatter options then toNumber() gets removed.

Maybe I am just explaining this really badly, or maybe nobody else really finds this confusing possibly. Could quite easily just be me.

1 Like

@psweb - I watched your video but you really have to put the .toNumber each time you read an input value…
So also the first one.

So before adding + - you first need to convert the input to number.

As a rule - where you have .value from the input - add first .toNumber to it and then calculations

I have done that and if the type is number in the form itself then toNumber() does not work, I have to change the form inputs to Text and then the toNumber works, but that is obviously going to cause trouble with the validators as the validators will now only have text field validations and not number field validations. I will rather stick to changing the type to number in the data formatter itself so i can retain the form field of Number as well as not need to then use the toNumber() conversion.

testdataformatter2.mp4 (19.1 MB)

aha now we found the problem :slight_smile: seems App Connect was trying to be too smart and auto converted the inputs with type number to number values - but that shouldn’t be the case - all inputs have to be of type text.

So we have fixed that and it will be available in an App Connect update.

So then the toNumber will work as expected.

2 Likes