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 [email protected].
For more options, visit https://groups.google.com/d/optout.
