@arabdevelop/svelte-formly

Svelte Formly

by @kamalkech

Features

• ️ Generate Forms
• Easy to extend with custom field type, validation, wrapper and extension.

Installation

npm i @arabdevelop/svelte-formly

Usage

<script>
  import { onDestroy } from "svelte";
  import { Field, valuesForm } from "@arabdevelop/svelte-formly/src";

  const fields = [
    {
      type: "text",
      name: "firstname",
      value: "",
      id: "firstname",
      placeholder: "Tap your first name",
      validation: ["required", "min:6"]
    },
    {
      type: "text",
      name: "lastname",
      value: "",
      id: "lastname",
      placeholder: "Tap your lastname"
    },
    {
      type: "email",
      name: "email",
      value: "",
      id: "email",
      placeholder: "Tap your email",
      validation: ["required", "email"]
    }
  ];

  let message = "";

  function onSubmit(evt) {
    var form = evt.target;
    valuesForm.subscribe(data => {
      if (data.isValidForm) {
        message = "Congratulation! now your form is valid";
      } else {
        message = "Your form is not valid!";
      }
    });
  }

  onDestroy(valuesForm);
</script>

<h2>{message}</h2>
<form on:submit|preventDefault="{onSubmit}" novalidate>
  <Field {fields} />
  <button class="btn btn-primary" type="submit">Submit</button>
</form>