1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

elmで入力フォームの増減を実装

Posted at

elm歴1週間くらいのウェブエンジニアが書いたコードです。
動くサンプルはこちら
https://suotani.github.io/elm-practice/multi/index.html

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import List

-- MAIN

main =
  Browser.element
    { init = init
    , update = update
    , subscriptions = subscriptions
    , view = view
    }


-- MODEL
type alias Step = 
  { urls : String
  , text : String
  , id : Int
  }

type alias Model =
  { title : String
  , explain : String
  , steps : List Step 
  }

init : () -> (Model, Cmd Msg)
init _ =
  (Model "" "" [Step "" "" 1], Cmd.none)


-- UPDATE
type Msg
  = AddField
  | DeleteField Int
  | Input String Int String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    AddField ->
      ({model | steps = List.append model.steps [Step "" "" (List.length model.steps + 1)]}
      , Cmd.none)
    
    DeleteField id ->
      ({ model | steps = reNumbering (deleteListFromID id model.steps) }, Cmd.none)
    
    Input column id val ->
      ({model | steps = fieldUpdater model.steps id column val }, Cmd.none)

deleteListFromID : Int -> List Step -> List Step
deleteListFromID id steps = List.filter (\x -> not(x.id == id)) steps

reNumbering : List Step -> List Step
reNumbering steps =
  List.indexedMap (\i step -> Step step.urls step.text (i+1)) steps

fieldUpdater : List Step -> Int -> String -> String -> List Step
fieldUpdater steps id column val = List.map (updateField id column val) steps

updateField : Int -> String -> String -> Step -> Step
updateField id column val step =
  if step.id == id then
    case column of
      "urls" ->
        Step val step.text id
      
      "text" ->
        Step step.urls val id
      
      _ ->
        step
  else
    step

--SUBSCRIPTIONS

subscriptions : Model -> Sub Msg
subscriptions model = 
  Sub.none

-- VIEW

view : Model -> Html Msg
view model = 
  div []
    [ input [type_ "text", placeholder "title"] [] 
    , input [type_ "explain", placeholder "explain"] [] 
    , button [onClick AddField] [text "append"]
    , div []
        (List.map fieldView model.steps)
    ]

fieldView : Step -> Html Msg
fieldView step =
  div []
    [ p []
        [text (String.fromInt step.id)
        ,button [onClick (DeleteField step.id)] [text ("delete" ++ (String.fromInt step.id))]
        ]
    , div []
        [ input
            [ type_ "text"
            , placeholder "urls"
            , value step.urls
            , name ("curriculum[steps_attributes][" ++ (String.fromInt step.id) ++ "][urls]") 
            , onInput (Input "urls" step.id)
            ] []]
    , div []
        [ input
           [ type_ "text"
           , placeholder "text"
           , value step.text
           , name ("curriculum[steps_attributes][" ++ (String.fromInt step.id) ++ "][text]")
           , onInput (Input "text" step.id)
          ] []]
    ]
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?