2016-10-17 2 views
5

У меня простая форма с одним полем. Я хотел бы очистить поле на форме submit. Я очищаю свою модель в своей функции обновления, но текст остается в текстовом вводе.Elm: clear form on submit

type alias Model = 
    { currentSpelling : String } 

type Msg 
    = MorePlease 

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
     MorePlease -> 
      ( log "cleared spelling: " { model | currentSpelling = "" } 
       , fetchWord model.currentSpelling) 

view : Model -> Html Msg 
view model = 
    div [] 
     [ Html.form [ onSubmit MorePlease ] 
      [ input [ type' "text" 
        , placeholder "Search for your word here" 
        , onInput NewSpelling 
        , attribute "autofocus" "" 
        ] [] 
      , text model.currentSpelling 
      , input [ type' "submit" ] [ text "submit!" ] 
      ] 
     ] 

text отображения model.currentSpelling очищает, когда я очистить его с помощью функции обновления, но поле ввода текста остается заселена. Любая идея, как очистить его?

fetchWord вызывает HTTP-вызов, но здесь он отсутствует.

ответ

10

Добавить value model.currentSpelling в Атрибуты входного элемента . Вот как вы можете управлять строкой внутри элемента ввода в html.

+1

фантастический! 'Html.Attributes.value' - это то, что мне нужно! – Charlie

+2

Помните, что 'Html.Attributes.value' страдает от ошибки, которая приводит к« прыгающему курсору »при быстром наборе текста, когда курсор не расположен после последнего символа в поле. См. Здесь ошибку: https://runelm.io/c/wdr и нить о проблеме здесь: https://github.com/elm-lang/html/issues/105 – A5308Y

+0

Мне потребовался в то время как выяснить, что представление «обновляется» каждый раз, когда значение currentSpelling будет обновляться. Это означает, что currentSpelling не привязан к значению, вместо этого отображаемое значение постоянно обновляется, поскольку просмотр обновляется. –