2016-10-17 4 views
5

나는 하나의 필드가있는 단순한 형태입니다. 양식 제출시 필드를 지우고 싶습니다. 업데이트 기능에서 모델을 지우고 있지만 텍스트는 텍스트 입력에 남아 있습니다. 나는 업데이트 기능을 비울 때 model.currentSpelling를 표시Elm : 클리어 양식 제출

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는 지워집니다 만, 텍스트 입력 상자가 채워 남아있다. 어떤 생각을 어떻게 지울 수 있습니까?

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은 값에 "바운드"되지 않고 대신 뷰가 업데이트되므로 표시되는 값이 계속 업데이트됩니다. –