Svelte Formly

by @kamalkech

Features

• ⚡️ Generate dynamic forms for sveltejs / Sapper js.
• 😍 Easy to extend with custom field type, custom validation.

Installation

npm i svelte-formly

Usage

<script>
  import { get } from "svelte/store";
  import { valuesForm, Field } from "svelte-formly";

  const fields = [
    {
      type: "color",
      name: "color",
      id: "color",
      label: "Color Form"
    },
    {
      type: "text",
      name: "firstname",
      value: "",
      id: "firstname",
      class: ["form-control"],
      placeholder: "Tap your first name",
      validation: ["required", "min:6"],
      messages: {
        required: "Firstname field is required!",
        min: "First name field must have more that 6 caracters!"
      }
    },
    {
      prefix: {
        class: ["custom-form-group"]
      },
      type: "text",
      name: "lastname",
      value: "",
      id: "lastname",
      placeholder: "Tap your lastname",
      description: {
        class: ["custom-class-desc"],
        text: "Custom text for description"
      }
    },
    {
      type: "email",
      name: "email",
      value: "",
      id: "email",
      placeholder: "Tap your email",
      validation: ["required", "email"]
    },
    {
      type: "radio",
      name: "gender",
      radios: [
        {
          id: "female",
          value: "female",
          title: "Female"
        },
        {
          id: "male",
          value: "male",
          title: "Male"
        }
      ]
    },
    {
      type: "select",
      name: "city",
      id: "city",
      label: "City",
      validation: ["required"],
      options: [
        {
          value: 1,
          title: "Agadir"
        },
        {
          value: 2,
          title: "Casablanca"
        }
      ]
    }
  ];

  let message = "";
  let values = {};
  let color = "#ff3e00";

  function onSubmit() {
    const data = get(valuesForm);
    if (data.isValidForm) {
      values = data.values;
      color = values.color ? values.color : color;
      message = "Congratulation! now your form is valid";
    } else {
      message = "Your form is not valid!";
    }
  }
</script>

For Sapper

<script>
  import { onMount } from "svelte";
  import { get } from "svelte/store";

  let Field;
  let valuesForm;

  onMount(async () => {
    const module = await import("svelte-formly");
    Field = module.Field;
    valuesForm = module.valuesForm;
  });

  const fields = [
    {
      type: "text",
      name: "username",
      id: "username",
      validation: ["required"],
      messages: {
        required: "Username is required!"
      }
    },
    {
      type: "email",
      name: "email",
      id: "email",
      validation: ["required", "email"],
      messages: {
        required: "E-mail is required!"
      }
    }
  ];

  function onSubmit() {
    const data = get(valuesForm);
    if (data.isValidForm) {
      const values = data.values;
    }
  }
</script>

<style>
  * {
    color: var(--theme-color);
  }
  .custom-form :global(.form-group) {
    padding: 10px;
    border: solid 1px var(--theme-color);
    margin-bottom: 10px;
  }
  .custom-form :global(.custom-form-group) {
    padding: 10px;
    background: var(--theme-color);
    color: white;
    margin-bottom: 10px;
  }
  .custom-form :global(.class-description) {
    color: var(--theme-color);
  }
</style>

<h1 style="--theme-color: {color}">Svelte Formly</h1>
<h3>{message}</h3>
<form
  on:submit|preventDefault="{onSubmit}"
  class="custom-form"
  style="--theme-color: {color}"
>
  <Field {fields} />
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Params

Inputs : text, password, email, number, tel

<script>
  fields = [
    {
      type: "text", // or password, email, number, tel, required
      name: "namefield", // required
      id: "idfield", // required
      class: "", // optional
      value: "", // optional
      label: "", // optional
      placeholder: "", // optional
      min: null, // optional
      max: null, // optional
      disabled: false, // optional
      validation: [] // optional
    }
  ]
</script>

Textarea

<script>
  fields = [
    {
      type: "textarea", // required
      name: "namefield", // required
      id: "idfield", // required
      class: "", // optional
      value: "", // optional
      label: "", // optional
      disabled: false, // optional
      rows: null, // optional
      cols: null, // optional
      validation: [] // optional
    }
  ]
</script>

Select

<script>
  fields = [
    {
      type: "select", // required
      name: "namefield", // required
      id: "idfield", // required
      class: "", // optional
      label: "", // optional
      disabled: false, // optional
      options: [
        {
          value: 1,
          title: 'option 1'
        },
        {
          value: 2,
          title: 'option 2'
        }
      ], // required
      validation: [] // optional
    }
  ]
</script>

Radio

<script>
  fields = [
    {
      type: "radio", // required
      name: "namefield", // required
      id: "idfield", // required
      class: "", // optional
      label: "", // optional
      disabled: false, // optional
      radios: [
        {
          id: 'radio1',
          value: 1,
          title: 'radio 1'
        },
        {
          id: 'radio2',
          value: 2,
          title: 'radio 2'
        }
      ], // required
      validation: [] // optional
    }
  ]
</script>

Color

<script>
  fields = [
    {
      type: "color", // required
      name: "namefield", // required
      id: "idfield", // required
      class: "", // optional
      label: "", // optional
      disabled: false, // optional
      value: "#ff3e00" // optional
    }
  ]
</script>

Range

<script>
  fields = [
    {
      type: "range", // required
      name: "namefield", // required
      id: "idfield", // required
      class: "", // optional
      label: "", // optional
      min: 10, // required
      max: 100, // required
      step: 10 // required
    }
  ]
</script>

Validation

List rules to validate form.

<script>
  const fields = [
    {
      ...,
      validation: [
        'required',
        'min:number',
        'max:number',
        'between:number:number',
        'equal:number',
        'email',
        'url'
        fnc
      ]
    }
  ];
</script>

Validation with custom rule

<script>
  import { get } from "svelte/store";
  import { Field, valuesForm } from "svelte-formly";

  const fields = [
    {
      type: "text",
      name: "firstname",
      id: "firstname",
      validation: ["required"]
    },
    {
      type: "text",
      name: "lastname",
      id: "lastname",
      validation: ["required", notEqual, customRule2],
      messages: {
        notEqual: "Last name not equal to First name", // Custom message error, property name must equal to function name.
        customRule2: 'foo bar'
      }
    }
  ];

  // Custom rule to force field
  function notEqual() {
    const values = get(valuesForm).values;
    if (values.firstname === values.lastname) {
      return false;
    }
    return true;
  }

  function customRule2() {
    // ...others conditions.
  }
</script>