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.

Roadmap

Field Type Support

• Support Basic Input fields (text, number, password, email, url) as text values
  • Support multiple named fields with unique id attributes, with an array of results sorted by ID alphabetically
  • Return correct value type for fields (return number as Number value)
• Support Select Fields
  • Support Multiple Select Fields
• Support Radio Fields
• Support Checkbox Fields
  • Support Multiple Checkbox Fields
• Support the Range input
• Support the Color input
• Support the Date / Time inputs
• Support the File input

Validation

• Custom field-level validation via formula options
• Custom form-level validation via formula options
• Support for localised messages for validation errors

Other Items

• Add Unit Tests - IN PROGRESS
• Add full documentation - IN PROGRESS

Icon made by Eucalyp from flaticon.com

Changelog

[0.7.0] 2021-02-19

Added

• defaultValues option that allows default values to be set on fields - supports single and multi-value properties - these values are only applied if there is no value already bound to the field.

  <script>
    import {formula} from 'svelte-formula';
    const { form } = formula({
      defaultValues: {
        textField: 'Initial Value',
        numberField: 42,
        checkBox: true,
        multiValue: ['option1', 'option3']
      }
    })
  </script>
  

• Added isFormReady store - Formula stores are created immediately when using the formula method, previously they were always empty objects filled with keys from parsing the form. This meant early binding would cause an error and forced the use of ?. operators in the templates. This store can now be used as {#if $isFormReady}, reducing the need for the number of conditionals in templates

• initialValues store that contains the values at form initialisation, this is generated from merging any initial element values merged with any potential default values

• formReset function that when called will reset the form to the pristine state at setup time