Elm – Updating Model with Button Click

In the previous tutorial(Working with Buttons and TextBoxes), we displayed a button and a TextBox on the UI and  was able to capture button click.

1. Modifying Records in Elm
2. Modify the Model
3. Capturing TextBox Input on Button Click

1. Modifying Records in Elm

Before actually discuss model update, let’s see how record can be modified in Elm. This is because you remember that Elm is a pure functional language and therefore all objects are immutable.

Approach 1 – Replace existing model

In our program we have a model with an integer value defined in the init method. So one way to modify the record is to just return a new value in the update function. So in the code below, I’m returning a new value of 20.

case msg of
        Add ->
            -- model
            {value =  20}

Here the model is replaced completely.

Approach 2 – Using Spread Operator Equivalent

Spread operator is used in JavaScript to replace one or more fields in a records while leaving other fields intact. Assuming with have the student record below:

 studentRec = {firstname: "Kindson", lastname: "Munonye", score: 100}

We could just change the score using spread operator like so

 studentRec2 = {...studentRec, score:99}

Now this would create a new record with an updated score of 99.

Now the approach above javascript. The equivalent syntax for Elm is given below. Note that we replace : with =

studentRec = {firstName = "Kindson", lastname = "Munonye", score = 100}

For update, we have:

studentRec2 = {studentRec | age = 99}

2. Modify and  the Model

We would now like to modify our model so that instead of being a single value, it would be record. Therefore, you need to adjust the init function like so:

init = {
          firstname="Kindson"
        , lastname="Munonye"
        , score=100
    }

Then, we can modify the record using the ‘|’ operator. In this case we modify the score while leaving the firstname and lastname unchanged

case msg of
    Add ->
        -- model
        {model | score =  99}

In this case, the model remains, but we just updated the score. Just think of it as a field in the model

3. Capturing TextBox Input on Button Click

First, we need to create a message to store the TextBox input. Then we need to store what was entered in the input in the model. Follow the steps below:

Step 1 – Import onInput from Html.Events

Step 2 – Create a new message called TextChanged which would be a string type.  So you now have:

type Messages =
    Add
    | TextChanged String

Also note that the TextChanged message has a parameter which is a string. This is the message that was typed in.

Step 3 – Add the ChangedText message to the  view like so

view model =   
    div [] [
        text(fromInt model.value),
        div [] [],
        input [onInput TextChanged] [], -- added onInput
        button [onClick Add] [text "Add"]
    ]

Step 4 – Modify the update function to handle message of type TextChanged.

case msg of
    Add ->
        {model | value =  20}
    TextChanged newText ->
        -- Use let ... in here 
        model

Step 5 – We want to show the changed text in the console. To do this, use let … in statement in just before model in the update function

TextChanged newText ->
    let
        log3 = log "Entered Text" newText
    in
    model

Now you can recompile the program and open the page as well as the console window. You will notice that once you enter text in the TextBox, it is logged in the console.

Cool! We now have to talk about some kind of input validation or say input parsing. Let’s do this in the next part.