HTML Number Form Inputs

tech4him 2018-02-22 21:35:09 UTC #1

I’ve seen a few varying answers, but I’m wondering if there is a best (or accepted) way to use number inputs in forms. The onInput event always returns a string.

mthadley 2018-02-22 23:28:33 UTC #2

You can use String.toInt and then do something with the Result. Looking at some of my old code, I had a similar case; I ended up defining a helper and then using it like this.

But in general, if you have a reasonable default…

type Msg = HandleInput Int

handleInput : Attribute Msg
handleInput =
    onInput (HandleInput << Result.withDefault 0 << String.toInt)

Sebastian 2018-02-22 23:51:55 UTC #3

We use String in our form model for this. Then parse that at the very end for validation and sending to the BE.

The reason is that working with numbers is harder if you want to allow decimals. e.g. user types 0., then the decoder removes the . and the user can’t type a decimal.

We found that it is easier to deal with number inputs by adding type="number" to the input and letting the model be a String.

tech4him 2018-02-23 00:16:22 UTC #4

@mthadley That does seem to be the clearest way. As far as I can tell though, like @Sebastian noted, it doesn’t work as well for non-integer (float) values. Did you ever try it with that and have a solution?

tech4him 2018-02-23 00:17:09 UTC #5

@Sebastian Do you happen to have an example of the best way to do validation in that case?

Sebastian 2018-02-23 00:42:18 UTC #6

Here I made an example https://ellie-app.com/djZX9DPkYa1/1

wmakley 2018-02-27 16:49:52 UTC #7

I always use Strings to store form values in my model, because that is what they are. Then at certain times I attempt to parse and normalize the string, such as the blur event or form submit.

Sometimes I don’t even bother because the API has to do that anyway, and I can show what was actually persisted after I get a response back. Works for simpler CRUD apps.

I do sometimes use event handlers on the form fields to directly filter key presses. Elm is currently bad at this, so I do it using jQuery event delegation (I know I know).

mthadley 2018-02-27 18:03:17 UTC #8

No, I only ever needed Int values, so the above worked for me. Sounds like a String might work better for you.

simonh1000 2018-02-27 18:50:21 UTC #9

I have a type that can take an Int and a String, so I plug onInput to the String version, and run String.toInt onBlur