Numerical TextInput

How-to Discussions
1

What is the simplest way of binding a TextInput to an observer that can only accept numerical values?

I have some numerical values that can be adjusted via Sliders with Text labels next to them.

If you tap on the label, you can edit the value directly via a TextInput.

TextInput.InputHint is set to "Integer".

However, if while editing the TextInput you delete all digits the app dies with ERROR: Input string was not in a correct format because, rightly so, the observable can no longer be parsed as a number for the Slider.Value.

Is there a simple way of only writing back to the observable if the TextInput is in a valid numerical format? Ideally also with the ability to clamp within a min/max range.

2

You can use a little bit of javascript to validate that the input is a number before passing it on.
This seems to be a workable option in that case, so you could try this:

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		tout = Observable(0);
		function isNumber(n) {
		  return !isNaN(parseFloat(n)) && isFinite(n);
		}
		function handleinput(arg){
			if(isNumber(arg.value)) tout.value = arg.value;
		}
		module.exports = {tout,handleinput}
	</JavaScript>
	<ClientPanel>
		<Slider Value="{tout}" Dock="Top"/>
		<TextBox ValueChanged="{handleinput}"/>
	</ClientPanel>
</App>
3

Okay, this seems really obvious to me now xD Thanks!

( For anyone reading this and wondering about using this with a custom class and properties, you can access the properties locally in the Javascript block via this. So to update the input property via js you’d do this.input.value = bar )

Thanks again!