Getting started

With Solid Formly you can generate a dynamic forms with custom rules and styles for application's solidjs & solid-start 🙂.

  •  Generate dynamic and reactive forms.
  •  Easy to extend with custom field type and validation.

Installation

npm install solid-formly

Usage

The firstname is required
Your firstname is too short min=3
The password is required
Your password is too short min=6
import { createSignal, Show } from "solid-js";
import { Formly, IValue, IField } from "solid-formly";

const form_name = "formly_usage";
const fields: IField[] = [
  {
    type: "input",
    name: "firstname",
    attributes: {
      type: "text",
      id: "firstname",
      classes: ["form-control"],
      placeholder: "Tap your first name",
    },
    rules: ["required", "min:3", "max:10"],
    messages: {
      required: "The firstname is required",
      min: "Your firstname is too short min=3",
      max: "Your firstname is too long max=10",
    },
  },
  {
    type: "input",
    name: "password",
    attributes: {
      type: "password",
      id: "password",
      classes: ["form-control"],
      placeholder: "Tap your password",
      autocomplete: "off",
    },
    rules: ["required", "min:6", "max:10"],
    messages: {
      required: "The password is required",
      min: "Your password is too short min=6",
      max: "Your password is too long max=10",
    },
  },
];

const Form = () => {
  const [values, setValues] = createSignal<any>(null);

  const onSubmit = (data: IValue) => {
    setValues(data);
  };

  return (
    <>
      <Show when={values()}>
        <pre>
          <code>{JSON.stringify(values(), null, 2)}</code>
        </pre>
      </Show>

      <Formly
        form_name={props.form_name}
        fields={props.fields}
        onSubmit={onSubmit}
        btnSubmit={{
          text: "Send",
        }}
        btnReset={{
          text: "Reset",
          classes: ["outline", "btn-primary"],
        }}
        real={true}
      />
    </>
  );
};

export default Form;