Namespace Formlet

A Formlet is a function that constructs a Form.

const simpleFormlet = (name: string, init: string) => Form.Field(Field.Text({
  name, init, attributes: {}, validate: V.Success
}));
Copy

This module defines an interface for a generic Formlet and provides constructor and combinator functions for it.

const nameFormlet = (name: string) => Formlet.netext("name", name);
const nameForm = nameFormlet("solid-formlet");
const nameValue = Form.readForm(nameForm);

nameValue.match({
  Success: (name) => console.log(`Welcome ${name}!`),
  Failure: (errors) => console.log(errors.join(", ")),
});
Copy

The Formlets provided are ready to be used with combinators from Form.

import { Form, Formlet, Maybe } from "solid-formlet";

type User = {
  fullname: { name: string; surname: string };
  email: Maybe.Maybe<string>;
};

const userFullName = (user: User) =>
  Form.Group(
    "fullname",
    Form.lift(
      (name: string, surname: string) => ({ name, surname }),
      Formlet.netext("name", user.fullname.name),
      Formlet.netext("surname", user.fullname.surname),
    ),
  );

const userEmail = (user: User) =>
  Form.Group(
    "email",
    Form.When(
      Formlet.bool("subscribe", Maybe.isJust(user.email)),
      Formlet.email("email", Maybe.withDefault(user.email, "")),
    ),
  );

export const userForm = (user: User) =>
  Form.liftRecord({
    fullname: userFullName(user),
    email: userEmail(user)
  });
Copy