FancyForms is a library for building forms in Elm. It is designed with the following goals in mind:
Msg
and one field on the model.PartialForm { view : FancyForms.FormState.FormState -> List (FancyForms.FormState.Error customError) -> List (Html Msg)
, combine : FancyForms.FormState.FormState -> data } customError dat
}
A form that collects a value of type data
and potentially produces errors of type customError
.
form : FieldWithErrors customError -> FancyForms.FormState.Validator data customError -> FancyForms.FormState.DomId -> a -> PartialForm a customError data
Defines a new form that fields can be added to. Takes four arguments: 1, A unique id for the form to be used as id in the DOM
A validator function that takes the form data and returns a list of errors
A function that receives the fields and returns the view
and combine
functions
A function that receives the markup of a field and combines it with a list of errors
myForm : Form Int ()
myForm =
Form.form
(\errors_ html -> html)
(\data -> [])
"minimal-example"
(\amount ->
{ view = \formState _ -> amount.view formState
, combine = \formState -> amount.value formState
}
)
|> field (integerInput [])
field : (data -> value) -> FancyForms.FormState.Widget widgetModel msg value customError -> PartialForm (Field value customError -> c) customError data -> PartialForm c customError data
Adds a new field with the given widget to the form
{ id : FancyForms.FormState.FieldId
, value : FancyForms.FormState.FormState -> a
, errors : FancyForms.FormState.FormState -> List (FancyForms.FormState.Error customError)
, view : FancyForms.FormState.FormState -> List (Html Msg)
, multiple : Basics.Bool
}
The type of a field in the form.
isValid : Form data customError -> FancyForms.FormState.FormState -> Basics.Bool
Returns true if the data entered in the form is valid
validate : List (FancyForms.FormState.Validator value customError) -> FancyForms.FormState.Widget model msg value customError -> FancyForms.FormState.Widget model msg value customError
Adds a validator to a widget.
List (FancyForms.FormState.Error customError) -> List (Html Msg) -> List (Html Msg)
A function that recieves the markup of a field and combines with a list of errors.
{ fn : f
, count : Basics.Int
, updates : Dict FancyForms.FormState.FieldId (FancyForms.FormState.SubfieldId -> FancyForms.FormState.FieldOperation -> Json.Encode.Value -> ( Json.Encode.Value
, FancyForms.FormState.Effect ))
, fieldWithErrors : FieldWithErrors customError
, validator : FancyForms.FormState.Validator data customError
, blur : FancyForms.FormState.FormState -> FancyForms.FormState.FormState
, domId : FancyForms.FormState.DomId
, isConsistent : FancyForms.FormState.FormState -> Basics.Bool
, initWithData : data -> FancyForms.FormState.FormState -> FancyForms.FormState.FormState
}
Represents a form that still needs it's fields to be declared. Once all the fields that the view function consumes are declared it is not "partial" anymore.
The message type for the form.
init : Form data customError -> data -> FancyForms.FormState.FormState
Initializes a form state with the default values
update : Form a customError -> Msg -> FancyForms.FormState.FormState -> FancyForms.FormState.FormState
Updates the form state based on the form message.
render : (Msg -> msg) -> Form a customError -> FancyForms.FormState.FormState -> List (Html msg)
Takes the following three arguments to display a form:
a function to turn the forms messages into a Msg
of the application.
the form
the current state of the form
type Msg = ... | ForForm Form.Msg | ... type alias Model = { ... , formState : FormState, .. } myForm = Form.form ...
view model = div [] <| Form.render ForForm myForm model.formState
extract : Form data customError -> FancyForms.FormState.FormState -> data
Returns the result of the combine
function aka the current state of the form.
listField : ListWithAddButton Msg -> FieldWithRemoveButton Msg -> value -> (data -> List value) -> FancyForms.FormState.Widget model msg value customError -> { a | fn : Field (List value) customError -> b, count : Basics.Int, updates : Dict String (FancyForms.FormState.SubfieldId -> FancyForms.FormState.FieldOperation -> Json.Encode.Value -> ( Json.Encode.Value, FancyForms.FormState.Effect )), fieldWithErrors : FieldWithErrors customError, validator : e, blur : c -> FancyForms.FormState.FormState, domId : FancyForms.FormState.DomId, isConsistent : FancyForms.FormState.FormState -> Basics.Bool, initWithData : data -> FancyForms.FormState.FormState -> FancyForms.FormState.FormState } -> { fn : b, count : Basics.Int, updates : Dict String (FancyForms.FormState.SubfieldId -> FancyForms.FormState.FieldOperation -> Json.Encode.Value -> ( Json.Encode.Value, FancyForms.FormState.Effect )), fieldWithErrors : FieldWithErrors customError, validator : e, blur : c -> FancyForms.FormState.FormState, domId : FancyForms.FormState.DomId, isConsistent : FancyForms.FormState.FormState -> Basics.Bool, initWithData : data -> FancyForms.FormState.FormState -> FancyForms.FormState.FormState }
Adds a field to the form where the user can add and remove elements.
The first argument is a ListWithAddButton
function that cobines the inout list with a button to add a new element.
The second argument is a FieldWithRemoveButton
function that combines one item with a button to remove it.
The third argument is the widget to use for each element in the list.
msg -> List (Html msg) -> List (Html msg)
A function that recieves the markup of a list item and combines it with a butoon to remive it from the List.
msg -> List (Html msg) -> List (Html msg)
A function that recieves the markup of a field and combines it with a button to add a new item.
fieldWithVariants : (data -> value) -> (Variants String -> FancyForms.FormState.Widget String msg String customError) -> ( String, Form value customError ) -> List ( String, Form value customError ) -> (value -> String) -> PartialForm (Field value customError -> c) customError data -> PartialForm c customError data
Adds a new field to with different variants to the form. Each variant is represented by a label and a sub form.
The function takes the following arguments:
{ value : a
, id : String
, label : String
}
A variant for widgets with a "select" notion.
List.Nonempty.ListNonempty (Variant a)
A nonempty list of variants.
toWidget : Form a customError -> FancyForms.FormState.Widget FancyForms.FormState.FormState Msg a customError
Converts a form to a widget.
wrap : FancyForms.FormState.Widget widgetModel msg value customError -> (FancyForms.FormState.DomId -> List (Html msg) -> List (Html msg)) -> FancyForms.FormState.Widget widgetModel msg value customError
Creates a new Widget
that's decorated with the given function.