Example - Customer Rows

import { createEventDispatcher } from 'svelte';
import { get } from 'svelte/store';
import { beaker, formula } from 'svelte-formula@0.8.1';
const dispatch = createEventDispatcher();
const { form, formValues, updateForm } = formula();
// This creates a contact group - you can now bind `contacts.group` to the subgroup
const customers = beaker();
const customersValues = customers.formValues;
export let productData = {
productName: '',
// Set the store with any existing data
export let contactData = [{
firstName: 'Foo',
lastName: 'McBar',
email: 'foo@svelte.code',
subscriptionLevel: 'partial',
signups: ['daily', 'news'],
// Add a row to the store
function addCustomer() {
firstName: '',
lastName: '',
email: '',
subscriptionLevel: 'none',
signups: [],
// Remove a row from the store
function deleteCustomer(index) {
function submit() {
const mainForm = get(formValues);
const contactValues = get(customersValues);
//Do something with the data here
dispatch('signup', {
form: mainForm,
contacts: contactValues
<form use:form on:submit|preventDefault={submit}>
<label for='productName'>ProductName</label>
<input type='text' id='productName' name='productName' required bind:value={productData.productName} />
<button type='submit'>Submit Form</button>
<button on:click|preventDefault={addCustomer}>Add Customer</button>
<button on:click|preventDefault={() => customers.init(contactData)}>Reset Fields</button>
<button on:click|preventDefault={() => customers.clear()}>Clear Fields</button>
<table role="grid">
<th colspan=3>Customer Data</th>
<th>Subscription Level</th>
<tbody use:customers.group role="rowgroup">
{#each $customersValues as row, i}
<tr role="row">
<label for='firstName-{i}'>First Name</label>
<input type='text' id='firstName-{i}' name='firstName' required />
<label for='lastName-{i}'>Last Name</label>
<input type='text' id='lastName-{i}' name='lastName' required />
<label for='email-{i}'>Email Name</label>
<input type='email' id='email-{i}' name='email' required />
<!-- In multi-group forms, radio groups require a unique name in the DOM - her you can provide 'data-formula-name' to specify the data key -->
<label for='subscriptionLevel-{i}-1'>None
<input type='radio' id='subscriptionLevel-{i}-1'
data-formula-name='subscriptionLevel' value='none' />
<label for='subscriptionLevel-{i}-1'>Partial
<input type='radio' id='subscriptionLevel-{i}-2'
data-formula-name='subscriptionLevel' value='partial' />
<label for='subscriptionLevel-{i}-1'>Full
<input type='radio' id='subscriptionLevel-{i}-3'
data-formula-name='subscriptionLevel' value='full' />
<label for='signups-{i}-1'>Daily <input type='checkbox' id='signups-{i}-1' name='signups' value='daily' /></label>
<label for='signups-{i}-2'>Weekly
<input type='checkbox' id='signups-{i}-2' name='signups' value='weekly' />
<label for='signups-{i}-3'>News
<input type='checkbox' id='signups-{i}-3' name='signups' value='news' />
<label for='signups-{i}-4'>Product
<input type='checkbox' id='signups-{i}-4' name='signups' value='product' />
<button on:click|preventDefault={() => deleteCustomer(i)}>X</button>