svelte-formula

Svelte Formula

• Documentation
• Changelog

Formula is a library for Svelte with features for creating Zero Configuration reactive forms and fully data-driven applications.

Out-of-the box it's designed to work with HTML5 forms. Configuring your forms validation is as easy as setting attributes, and doesn't get in the way of things like Accessibility.

Formula also supports multi-row forms with Beaker, it's internal groups API for working with arrays of data.

Install Instructions

npm i svelte-formula

Usage

All you need is an element container with the Svelte use directive and form input fields with their name property set.

  <script>
    import { formula } from 'svelte-formula'
    const { form, formIsValid, validity, touched } = formula();

    // Here we can provide a default value
    export let projectname = '';

    // You can calculate values for valid UI states
    $: projectNameInvalid = $touched?.projectName && validity?.projectName?.invalid
  </script>

  <div use:form>
    <label for="project-name">Project Name</label>
    <input type="text" name="projectName" required minlength="8" class:error={projectNameInvalid} bind:value={projectName} />
    <span hidden={!projectNameInvalid}>{validity?.projectName?.message}</span>
    <button disabled={!$formIsValid}>Update Project Name</button>
  </div>

Visit the documentation for more details API instructions.

Icon made by Eucalyp from flaticon.com

Changelog

[0.8.0] - 2021-02-21

Added

• New beaker API that provides functionality for working with groups of data as multi-line forms. See documentation for more details on use

  import { beaker } from 'svelte-formula'
  const contacts = beaker();
  
  export let loadedContacts = [];
  
  const contactValues = contacts.formValues;
  contacts.init(loadedContacts) // Set initial values
  
  // Easily add items to the group
  function addRow(item) {
    contacts.add({...item});
  }
  //... or remove them
  function removeRow(index) {
    contacts.delete(index);
  }
  
  ....
  <div use:contacts.group>
  {#each $contactValues as contact, i}
    <!-- Template for each row -->
  {/each}
  </div>
  

Fixed

• Some internal API fixes and refactoring