2016-10-17 12 views
5

Mam prosty formularz z jednym polem. Chciałbym wyczyścić pole na formularzu zgłoszeniowym. Czyszczę mój model w mojej funkcji aktualizacji, ale tekst pozostaje w tekście wejściowym.Wiąz: wyraźny formularz na składanie

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 wyświetlania model.currentSpelling czyści kiedy opróżnić go z funkcji aktualizacji, ale pole wprowadzania tekstu pozostaje zaludnionych. Każdy pomysł, jak to wyczyścić?

fetchWord wykonuje połączenie HTTP, ale jest tutaj pominięte.

Odpowiedz

10

dodać value model.currentSpelling do atrybutów elementu wejściowego . W ten sposób możesz sterować ciągiem znaków wewnątrz obiektu wejściowego w html .

+1

fantastyczne! 'Html.Attributes.value' jest właśnie tym, czego potrzebowałem! – Charlie

+2

Należy pamiętać, że 'Html.Attributes.value' cierpi na błąd, który prowadzi do" skaczącego kursora "podczas szybkiego pisania, gdy kursor nie znajduje się po ostatnim znaku w polu. Zobacz błąd w działaniu tutaj: https://runelm.io/c/wdr i wątek dotyczący problemu tutaj: https://github.com/elm-lang/html/issues/105 – A5308Y

+0

Zajęło mi jednocześnie, aby dowiedzieć się, że widok jest "odświeżany" za każdym razem, gdy zaktualizowana zostanie wartość currentSpelling. Oznacza to, że currentSpelling nie jest "związany" z wartością, zamiast tego wyświetlana wartość jest stale aktualizowana, ponieważ widok jest aktualizowany. –