[elm-discuss] Forms with Floats / Dates

[Simon]

I think it is not uncommon to collect dates and float values from users.

update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }

floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []

The problem with the above is that the moment you type the . toFloat fails
and you get a 0 in your model. One way around it could be to delay
processing of the value by using onBlur (below), but I was wondering how
others handled this.

floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []

​

[Simon]

Correction

toString (toFloat "5.") == "5" -i.e. the `.` gets stripped off so you
can never actually add decimal values

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to delay
processing of the value by using onBlur (below), but I was wondering how
others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

[Bernardo]

Instead of onInput I listen to the *change *event so I don't validate and
update the model on every key press. In most cases I don't see a reason to
update the model on every key press.

Post by Simon
Correction
toString (toFloat "5.") == "5" -i.e. the `.` gets stripped off so you
can never actually add decimal values

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to delay
processing of the value by using onBlur (below), but I was wondering how
others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

[Rafał Cieślak]

I'd consider storing the whole string in the model and passing it to value.
This way you can capture whatever input the user types and convert it to
float only when you actually need to do something with the float.

IMHO because the input tag allows you to type any kind of string, you
should treat the value that comes from its onBlur as a string. You could
set type_ to "number", but that would still not exclude some invalid inputs
from being provided.

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to delay
processing of the value by using onBlur (below), but I was wondering how
others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

[j weir]

You could also format the input so it is always a decimal.

And instead of using Result.withDefault 0.0, revert to the existing value.
This way the input won't be destroyed if the user fat fingers a non numeral.

https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by Rafał Cieślak
I'd consider storing the whole string in the model and passing it to value.
This way you can capture whatever input the user types and convert it to
float only when you actually need to do something with the float.
IMHO because the input tag allows you to type any kind of string, you
should treat the value that comes from its onBlur as a string. You could
set type_ to "number", but that would still not exclude some invalid
inputs from being provided.

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to delay
processing of the value by using onBlur (below), but I was wondering how
others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

[j weir]

Even simpler is to just use input [] [type_ "number"] any reasons not to?

http://caniuse.com/#feat=input-number

https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by j weir
You could also format the input so it is always a decimal.
And instead of using Result.withDefault 0.0, revert to the existing value.
This way the input won't be destroyed if the user fat fingers a non numeral.
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by Rafał Cieślak
I'd consider storing the whole string in the model and passing it to
value. This way you can capture whatever input the user types and
convert it to float only when you actually need to do something with the
float.
IMHO because the input tag allows you to type any kind of string, you
should treat the value that comes from its onBlur as a string. You could
set type_ to "number", but that would still not exclude some invalid
inputs from being provided.

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to
delay processing of the value by using onBlur (below), but I was wondering
how others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

[Bernardo]

This is an improvement, but again, trying to validate on every key press
causes problems. Type a number and you can't delete it with backspace, you
can't enter a negative number, ctrl-z acts weird. Now, I'm sure you can
work around all of these problems, but why don't wait until the user has
finished and then update the model and validate?

Post by j weir
Even simpler is to just use input [] [type_ "number"] any reasons not to?
http://caniuse.com/#feat=input-number
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by j weir
You could also format the input so it is always a decimal.
And instead of using Result.withDefault 0.0, revert to the existing value.
This way the input won't be destroyed if the user fat fingers a non numeral.
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by Rafał Cieślak
I'd consider storing the whole string in the model and passing it to
value. This way you can capture whatever input the user types and
convert it to float only when you actually need to do something with the
float.
IMHO because the input tag allows you to type any kind of string, you
should treat the value that comes from its onBlur as a string. You
could set type_ to "number", but that would still not exclude some
invalid inputs from being provided.

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to
delay processing of the value by using onBlur (below), but I was wondering
how others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

[Simon]

Hi,
your idea looked interesting until I tried it. https://runelm.io/c/y3g
Try entering a number and then backspacing to delete it. I could not get
rid of the first digit


I thought onChange would do it, but my early tests seem to suggest that it
is firing just as often as onInput, which defeats the object

Post by j weir
Even simpler is to just use input [] [type_ "number"] any reasons not to?
http://caniuse.com/#feat=input-number
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by j weir
You could also format the input so it is always a decimal.
And instead of using Result.withDefault 0.0, revert to the existing value.
This way the input won't be destroyed if the user fat fingers a non numeral.
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by Rafał Cieślak
I'd consider storing the whole string in the model and passing it to
value. This way you can capture whatever input the user types and
convert it to float only when you actually need to do something with the
float.
IMHO because the input tag allows you to type any kind of string, you
should treat the value that comes from its onBlur as a string. You
could set type_ to "number", but that would still not exclude some
invalid inputs from being provided.

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to
delay processing of the value by using onBlur (below), but I was wondering
how others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

[Simon]

So my problem has evolved. I can see that onChange would work, but I am
also subscribing to KeyBoard.presses. As a result every keypress is firing
the update function even while onChange is waiting for a blur.

That shouldn’t be an issue I thought. If the key press does not change the
part of the model with the float in, then that part of the DOM would not be
rewritten, and indeed will remain constant until the ‘change’ event. But
that’s not the case. Even when I direct every keypress to NoOp (causing
update to return the model unchanged) the DOM is being rewritten and I’m
losing the edits in the input field.

I believe a possible fix it to use Html.Keyed but, before I try that, I’m
wondering why the DOM is being rewritten and whether there are other
approaches I could take

On Sunday, 22 January 2017 09:36:19 UTC+1, Simon wrote:

Hi,

Post by Simon
your idea looked interesting until I tried it. https://runelm.io/c/y3g
Try entering a number and then backspacing to delete it. I could not get
rid of the first digit
I thought onChange would do it, but my early tests seem to suggest that it
is firing just as often as onInput, which defeats the object

Post by j weir
Even simpler is to just use input [] [type_ "number"] any reasons not to?
http://caniuse.com/#feat=input-number
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by j weir
You could also format the input so it is always a decimal.
And instead of using Result.withDefault 0.0, revert to the existing value.
This way the input won't be destroyed if the user fat fingers a non numeral.
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by Rafał Cieślak
I'd consider storing the whole string in the model and passing it to
value. This way you can capture whatever input the user types and
convert it to float only when you actually need to do something with the
float.
IMHO because the input tag allows you to type any kind of string, you
should treat the value that comes from its onBlur as a string. You
could set type_ to "number", but that would still not exclude some
invalid inputs from being provided.

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to
delay processing of the value by using onBlur (below), but I was wondering
how others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

​

[Simon]

Here is an example of the problem
https://runelm.io/c/5nk

Post by Simon
So my problem has evolved. I can see that onChange would work, but I am
also subscribing to KeyBoard.presses. As a result every keypress is
firing the update function even while onChange is waiting for a blur.
That shouldn’t be an issue I thought. If the key press does not change the
part of the model with the float in, then that part of the DOM would not be
rewritten, and indeed will remain constant until the ‘change’ event. But
that’s not the case. Even when I direct every keypress to NoOp (causing
update to return the model unchanged) the DOM is being rewritten and I’m
losing the edits in the input field.
I believe a possible fix it to use Html.Keyed but, before I try that, I’m
wondering why the DOM is being rewritten and whether there are other
approaches I could take
Hi,

Post by Simon
your idea looked interesting until I tried it. https://runelm.io/c/y3g
Try entering a number and then backspacing to delete it. I could not get
rid of the first digit
I thought onChange would do it, but my early tests seem to suggest that
it is firing just as often as onInput, which defeats the object

Post by j weir
Even simpler is to just use input [] [type_ "number"] any reasons not to?
http://caniuse.com/#feat=input-number
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by j weir
You could also format the input so it is always a decimal.
And instead of using Result.withDefault 0.0, revert to the existing value.
This way the input won't be destroyed if the user fat fingers a non numeral.
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by Rafał Cieślak
I'd consider storing the whole string in the model and passing it to
value. This way you can capture whatever input the user types and
convert it to float only when you actually need to do something with the
float.
IMHO because the input tag allows you to type any kind of string, you
should treat the value that comes from its onBlur as a string. You
could set type_ to "number", but that would still not exclude some
invalid inputs from being provided.

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to
delay processing of the value by using onBlur (below), but I was wondering
how others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

​

[Bernardo]

That's the way the virtual dom works, the view is rewritten on every loop.
You need to change line 49 to HA.defaultValue (toString model).

Post by Simon
Here is an example of the problem
https://runelm.io/c/5nk

Post by Simon
So my problem has evolved. I can see that onChange would work, but I am
also subscribing to KeyBoard.presses. As a result every keypress is
firing the update function even while onChange is waiting for a blur.
That shouldn’t be an issue I thought. If the key press does not change
the part of the model with the float in, then that part of the DOM would
not be rewritten, and indeed will remain constant until the ‘change’ event.
But that’s not the case. Even when I direct every keypress to NoOp (causing
update to return the model unchanged) the DOM is being rewritten and I’m
losing the edits in the input field.
I believe a possible fix it to use Html.Keyed but, before I try that, I’m
wondering why the DOM is being rewritten and whether there are other
approaches I could take
Hi,

Post by Simon
your idea looked interesting until I tried it. https://runelm.io/c/y3g
Try entering a number and then backspacing to delete it. I could not get
rid of the first digit
I thought onChange would do it, but my early tests seem to suggest that
it is firing just as often as onInput, which defeats the object

Post by j weir
Even simpler is to just use input [] [type_ "number"] any reasons not to?
http://caniuse.com/#feat=input-number
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by j weir
You could also format the input so it is always a decimal.
And instead of using Result.withDefault 0.0, revert to the existing value.
This way the input won't be destroyed if the user fat fingers a non numeral.
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by Rafał Cieślak
I'd consider storing the whole string in the model and passing it to
value. This way you can capture whatever input the user types and
convert it to float only when you actually need to do something with the
float.
IMHO because the input tag allows you to type any kind of string, you
should treat the value that comes from its onBlur as a string. You
could set type_ to "number", but that would still not exclude some
invalid inputs from being provided.

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the .
toFloat fails and you get a 0 in your model. One way around it
could be to delay processing of the value by using onBlur (below), but I
was wondering how others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

​

[Simon]

That’s the way the virtual dom works, the view is rewritten on every loop

To be honest, I thought the exact opposite was the case - only bits that
have changed are rewritten?

Meanwhile defaultValue a perfect solution

@Witold: I can see how your solution works in some cases where you have
complete control of the model. But I have a recursive datastructure and
can’t readily start adding extra fields into leaf values of my tree

Simon

On Sunday, 22 January 2017 13:55:38 UTC+1, Bernardo wrote:

That's the way the virtual dom works, the view is rewritten on every loop.

Post by Bernardo
You need to change line 49 to HA.defaultValue (toString model).

Post by Simon
Here is an example of the problem
https://runelm.io/c/5nk

Post by Simon
So my problem has evolved. I can see that onChange would work, but I am
also subscribing to KeyBoard.presses. As a result every keypress is
firing the update function even while onChange is waiting for a blur.
That shouldn’t be an issue I thought. If the key press does not change
the part of the model with the float in, then that part of the DOM would
not be rewritten, and indeed will remain constant until the ‘change’ event.
But that’s not the case. Even when I direct every keypress to NoOp (causing
update to return the model unchanged) the DOM is being rewritten and I’m
losing the edits in the input field.
I believe a possible fix it to use Html.Keyed but, before I try that,
I’m wondering why the DOM is being rewritten and whether there are other
approaches I could take
Hi,

Post by Simon
your idea looked interesting until I tried it. https://runelm.io/c/y3g
Try entering a number and then backspacing to delete it. I could not
get rid of the first digit
I thought onChange would do it, but my early tests seem to suggest that
it is firing just as often as onInput, which defeats the object

Post by j weir
Even simpler is to just use input [] [type_ "number"] any reasons not to?
http://caniuse.com/#feat=input-number
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by j weir
You could also format the input so it is always a decimal.
And instead of using Result.withDefault 0.0, revert to the existing value.
This way the input won't be destroyed if the user fat fingers a non numeral.
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by Rafał Cieślak
I'd consider storing the whole string in the model and passing it to
value. This way you can capture whatever input the user types and
convert it to float only when you actually need to do something with the
float.
IMHO because the input tag allows you to type any kind of string,
you should treat the value that comes from its onBlur as a string.
You could set type_ to "number", but that would still not exclude
some invalid inputs from being provided.

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the .
toFloat fails and you get a 0 in your model. One way around it
could be to delay processing of the value by using onBlur (below), but I
was wondering how others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

​

​

[Witold Szczerba]

Hi,
this is my humble solution to this problem: https://runelm.io/c/a7u

In my application, I did not have to deal with numbers in forms, but I was
using "form" types like this:
type alias TextField = { value: String, error: String }
The validation was performed on update and form error messages was looking
for error not equal to empty string.

So, the idea with number fields:
type alias FloatField = { input: String, value: Maybe Float }
is like a variation of that one (you could add error here as well).

Regards,
Witold Szczerba

Post by Simon
Hi,
your idea looked interesting until I tried it. https://runelm.io/c/y3g
Try entering a number and then backspacing to delete it. I could not get
rid of the first digit
I thought onChange would do it, but my early tests seem to suggest that it
is firing just as often as onInput, which defeats the object

Post by j weir
Even simpler is to just use input [] [type_ "number"] any reasons not to?
http://caniuse.com/#feat=input-number
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by j weir
You could also format the input so it is always a decimal.
And instead of using Result.withDefault 0.0, revert to the existing value.
This way the input won't be destroyed if the user fat fingers a non numeral.
https://gist.github.com/jweir/9e8412a4fa0132866977626e337cb164

Post by Rafał Cieślak
I'd consider storing the whole string in the model and passing it to
value. This way you can capture whatever input the user types and
convert it to float only when you actually need to do something with the
float.
IMHO because the input tag allows you to type any kind of string, you
should treat the value that comes from its onBlur as a string. You
could set type_ to "number", but that would still not exclude some
invalid inputs from being provided.

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to
delay processing of the value by using onBlur (below), but I was wondering
how others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

--

You received this message because you are subscribed to the Google Groups
"Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an
For more options, visit https://groups.google.com/d/optout.

[Ray Toal]

Has there been any consensus on this question. I would _love_ to know if
there is a preferred Elm style for this. It seems like a very big deal.

Here's what I can glean from the thread so far. (I hope this post
reactivates the discussion.)

1. Floats and Dates and other such things are commonly taken from user
input in text fields.
2. There is a very valid question as to what is the proper MODEL.... should
the model hold a Float or a String?
3. There is some commentary in this thread about just using onChange
instead of onInput. Personally I think this is a non-question. Of course we
should be using onInput for almost everything. Live programming is
important and becoming expected. Unless you are hitting a server on every
keypress of COURSE you should aim for the live UX. Even then, you should
debounce whenever possible.
4. input type=number is a possibility but has some quirks.
5. So we are back to question #2.

If we use String for the Model type, the code feels shorter but the whole
thing feels hacky.

If we use Float for the Model type there is a lot of processing of Result
String String types everywhere. Even Result.andThen doesn't help the
readability much.

What have people been using? Have you been making your models Floats or
Strings?

Post by Simon
I think it is not uncommon to collect dates and float values from users.
update ...
NewValue v ->
{ model | floatvalue = String.toFloat v |> Result.withDefault 0.0 }
floatInput : Float -> Html Msg
floatInput v =
input
[ onInput NewValue
, value (toString v)
] []
The problem with the above is that the moment you type the . toFloat
fails and you get a 0 in your model. One way around it could be to delay
processing of the value by using onBlur (below), but I was wondering how
others handled this.
floatInput_ : Float -> Html Msg
floatInput_ v =
input
[ onBlur NewValue
, value (toString v)
] []
​

[Vlad GURDIGA]

Hi Simon!

As a newcomer to Elm, I too have this issue fresh in my experience, and my
approach
<https://github.com/gurdiga/xo.elm/blob/437b6ccf9dc8ca7d53120874b0a3d664d6fa0e2e/src/MyDate.elm> has
been similar to what Witold Szczerba’s: I’ve built myself a MyDate type to
hold all the information I need, and a few helper functions that work with
values of that type:

type alias MyDate =
{ string : String
, date : Maybe Date
, validationMessage : String
}

I think the essence of the approach is to hold user’s input separate from
the value that we want to make out of it in the end. 🀓