svelte-formula
Advanced tools
Changelog
[0.10.0] - 2021-03-12
New data-formula-bind attribute for elements - allows the event bindings to be customised. If used the default
bindings are not made (so they must be also passed) - more than one event type can be bound to by using the pipe (|)
separator.
<!-- Use other browser event types to bind to -->
<input type='text' name='myValue' data-formula-bind='mouseover' />
<!-- Bind to more than one event type, such as including the original event -->
<input type='text' name='myValue' data-formula-bind='mouseover|keyup' />
<!-- You can also emit your own custom events via elements inside custom components -->
<input type='number' name='myValue' data-formula-bind='customEvent' bind:this='{el}' />
<button on:click|preventDefault='{()' => el.dispatchEvent(new Event('customEvent'))}>Click Me</button>
options.preChanges method that is called when a change has been detected, but before any values are read or stores
updated
options.postChanges method that is called after all changes have been made to the stores, with the most recent form
values (this is functionally the same as formValues.subscribe(values => {})))
options.formValidators now correctly update isFormValid after other validity checks have been carried out instead
of before<input type="hidden"> fields now supported, both single and multi-value. Formula can only set the value of this
field via default values and cannot set the value ( but for example it can be changed in something
like options.preChanges) - hidden fields have no events, so these are a special case where the values are read with
each update.number, date, time and week now bind to both keyup and change handlers to handle both valid
input cases on these elementsExisting attribute data-beaker-key has been renamed to data-formula-name - this allows a custom name to be used
instead of the <input name="..."> value
Existing attributes data-beaker-form and data-beaker-row now correctly data-formula-form and data-formula-row
All event handlers wrapped in a setTimeout(()=> {}, 0) to defer an update until after DOM tick, this allows elements
to ensure value changes have completed before reading
Readme
Reactive Forms for Svelte
svelte-formula is a Library for use with Svelte that super-charges your ability to create rich
data-driven for applications.
npm i svelte-formula
All you need is an element container with the Svelte use directive and form input
fields with their name property set.
Visit the documentation for more details API instructions.
Formula is a library for creating Zero Configuration reactive form components, and fully data-driven applications.
Zero-Configuration means you need nothing more than a well-defined HTML5 form element to have fully reactive stores of data and form states.
Accessing the input requires only setting the name property, and for validation providing attributes like require
or minlength. Formula supports single and multi-value inputs across all widely supported HTML inputs and extends them
with checkbox groups and radio groups, and composite fields of values like text or number.
Formula creates a form instance that contains Svelte stores that contain value and validation information, and some additional lifecycle methods that allow your to dynamically add and remove customisations, and reset or destroy the form. It also attempts to apply ARIA attributes to help with accessibility.
Formula also supports a bunch of powerful options that provide additional validation, enrichment and custom messages.
For example with the enrich option
and enrichment store you can provide functions that
calculate additional computed values based on user input - for example calculating a password strength, or the length of
text a user has entered. These are useful.
Validations can be provided at the form and field level, and integrate with in-built browser validations to provide native messages, which can be customised for localisation.
Beaker take Formula and adds another layer for working with collections of data.
Using row-based input you can create full form instances per row that are also fully reactive and feed into Beaker's collection store.
Beaker also provides methods for setting, adding and removing items from the in-built stores, when can be used with
Svelte's {#each}{/each} blocks to create a re-usable template in the component
With this you can build applications such as multi-row editable tables or lists. See the documentation for more details and examples.
FAQs
Reactive Forms for Svelte
We found that svelte-formula demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).
