There are two things you do wrong here.
First one is that you treat `if/else` like a statement, but in Elm it's an
expression. In JavaScript or similar languages, the if/else means something
like:
*if (a) {*
* doB();*
*}*
*// or*
*if (a) {*
* doB();*
* doC();*
* doWhateverElseYouWant();*
*} else {*
* doD();*
* doF();*
*}*
In Elm the if/else is something very different, it only looks similar to
the statement above. For example:
*if a then b else c*
is kind of a function, it *takes* *a* as an argument and *returns* *b* or
*c*. An expression is something you can assign to:
*result = if a then b else c*
This is why Elm's "if" cannot live without "else", because the expression
would be incomplete. Elm's if/else in JavaScript looks like this:
*result = a ? b : c;*
So, do not try to *do things* inside Elm's if/else expressions. It won't
work.
Second thing is that in Elm every data structure is immutable. The only
possible way of changing the data is to create new one. What that means in
practice? Look at the *viewValidation* function you created: it takes
*Model* and returns *Html Msg*. So, one thing you can be 100% sure when
looking at this very signature: *there is no possible way to modify model
inside this function* (because it does not return model). There is no need
to read the function's body to know that and it does not matter how much
you would try you won't change the *flag* to *false*. Don't even try :)
That's one of the beauties of functional languages like Elm: there is so
much you can tell about the code without actually reading it. Looking at
the signatures gives you so much information. In JavaScript you have to
carefully read each line and only then you can (try to) reason what happens.
Regards,
Witold Szczerba
On Wed, Feb 22, 2017 at 7:08 PM, Anurup Mitra <[email protected]>
wrote:
> Hello!
>
> Disclaimer : I am not a programmer and don't understand computer science
> terms. The only formal education that I have had with programming is BASIC
> (school) and C (college - can't remember most of it :-p). Javascript seems
> clumsy and I came across Elm and tried learning it. Was working through the
> Elm tutorial and tried adding some of the extra suggested stuff in the
> "Forms" section of the Tutorial to test my own understanding.
>
> Tried compiling the following code. Idea is to validate form on pressing
> the Submit button.
>
> 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
>
> update : Msg -> Model -> Model
> update msg model =
> case msg of
> Name name ->
> { model | name = name }
>
> Age age ->
> { model | age = age}
>
> Password password ->
> { model | password = password }
>
> PasswordAgain password ->
> { model | passwordAgain = password }
>
> 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
> { model | flag = False }
> 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 ]
>
> This throws a compiler error as
>
> Detected errors in 1 module.
>
> -- SYNTAX PROBLEM ------------------------------
> --------------------------------
>
> I ran into something unexpected when parsing your code!
>
> 68| let (color, message) =
> ^
> I am looking for one of the following things:
>
> an 'else' branch
>
>
>
> whitespace
>
>
>
>
> I apologise in advance if this is not the correct platform to ask this or
> if Elm is not supposed to be for novices, but I would greatly appreciate
> any inputs regarding this.
>
> Best Regards
> Anurup
>
> --
> 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.
>
--
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.
