Modular Forms

Partas.Solid.ModularForms binds Modular Forms. Apart from some typing helpers and a couple of caveats with Fable.Remoting, the library is used as its docs describe.

Differences

Besides mapping a field with name, as the docs do, the binding adds a map extension method. It takes a lambda that selects the field from the form, and turns it into a string path with Fable.Core.Experimental.namesofLambda.

Take this form type:

type FormData = {
    Item: string
    Id: int
    Value: float
}

You connect a field to the form with a Field component. Instead of Field(name = "Value"), use map. It also passes the type parameters on to the field props:

let form = createFormStore<FormData,obj>()
let valueField = Field(of' = form).map(_.Value) {
        yield fun field (* FieldStore<FormData, float> *) fieldProps (* FieldElementProps *) ->
            // ...
    }

Fable.Remoting

Invalid submissions

If your form data is a record, initialise every field of the record by passing an initialValue. Modular Forms does not send null data, and Fable.Remoting will not match an object to a record unless every field is present with the right type.

For the same reason, every field of the record needs a Field component, so that each submission has a value for it. The fields do not have to be visible or active.

Reset or prefill a form

To reset the form or set it to a given state, use reset(form, initialValue = (* ... *)). Even when resetting to an empty form, pass an empty or default value.