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.

Install Instructions

npm i svelte-formula

Usage

All you need is a 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.7.1] 2021-02-19

Fixed

• Correctly rebind touch and dirty handlers after resetting
• Remove stray console.log