Peter, Witold and David,
Thanks to all of you for having taken time out to reply to a novice!
@ Peter : Your comment was an eye-opener. This wasn't obvious to me at all
because I am still to wrap my head around the FRP paradigm...
@ Witold : Your detailed reply is nothing short of exceptional. Thanks for
being so patient and writing out that nice reply. I have read it many times
already...
@ David : This is indeed something that I should have seen earlier as
Witold also pointed out.
I tried going back with all your comments and suggestions and redoing the
exercise and failed again. I now feel like cheating and asking for the
solution. My guess is that my sequential programming mindset is acting as a
blocker. Could you please help with how you would achieve the button press
validation?
I am at a loss to see how I can set up all of the model, update and view to
do this. By the way, the idea is to have a validation of the form done ONLY
AFTER the submit button has been pressed. I would love to know how this
solution would be attempted by a seasoned/professional programmer.
This is what I tried...
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
import String
main =
Html.beginnerProgram { model = model, view = view, update = update }
-- MODEL
type alias Model =
{ name : String
, age : String
, password : String
, passwordAgain : String
, flag : Bool
}
model : Model
model =
Model "" "" "" "" False
-- UPDATE
type Msg
= Name String
| Password String
| PasswordAgain String
| Age String
| SetFlag
unsetFlag : Model -> Model
unsetFlag model =
{ model | flag = False}
update : Msg -> Model -> Model
update msg model =
case msg of
Name name ->
{ model | name = name }
unsetFlag model
Age age ->
{ model | age = age}
unsetFlag model
Password password ->
{ model | password = password }
unsetFlag model
PasswordAgain password ->
{ model | passwordAgain = password }
unsetFlag model
SetFlag ->
{ model | flag = True }
-- VIEW
view : Model -> Html Msg
view model =
div []
[ input [ type_ "text", placeholder "Name", onInput Name ] []
, input [ type_ "text", placeholder "Age", onInput Age ] []
, input [ type_ "password", placeholder "Password", onInput Password ]
[]
, input [ type_ "password", placeholder "Re-enter Password", onInput
PasswordAgain ] []
, div [] [button [ onClick SetFlag ] [text "Submit"] ]
, viewValidation model
]
viewValidation : Model -> Html msg
viewValidation model =
if model.flag == True then
let (color, message) =
if Result.withDefault 0 (String.toInt model.age) <= 0 then
("red", "Funny Age")
else if String.length model.password < 9 then
("red", "Password too short")
else if model.password == model.passwordAgain then
("green", "OK")
else
("red", "Passwords do not match!")
in
div [ style [("color", color)] ] [ text message ]
else
let (color, message) = ("white", "")
in div [ style [("color", color)] ] [ text message ]
--
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 email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
