Merge pull request #14 from mdauner/allow-initial-values

Allow initial values

README.md

@@ -62,6 +62,10 @@ $ yarn add sveltejs-forms
     { id: 'react', title: 'React' },
     { id: 'angular', title: 'Angular' },
   ];
+
+  const initialValues = {
+    language: 'svelte'
+  }
 </script>
 
 <style lang="scss">
@@ -81,7 +85,11 @@ $ yarn add sveltejs-forms
   }
 </style>
 
-<Form {schema} on:submit={handleSubmit} let:isSubmitting>
+<Form
+  {schema} //optional
+  {initialValues} //optional
+  on:submit={handleSubmit}
+  let:isSubmitting>
   <Input name="email" />
   <Input name="password" type="password" />
   <Select name="language" {options} />

package.json

@@ -2,7 +2,7 @@
   "name": "sveltejs-forms",
   "description": "Declarative forms for Svelte",
   "homepage": "https://mdauner.github.io/sveltejs-forms/",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "repository": "github:mdauner/sveltejs-forms",
   "svelte": "src/components/components.module.js",

src/App.svelte

@@ -32,6 +32,10 @@
     { id: 'react', title: 'React' },
     { id: 'angular', title: 'Angular' },
   ];
+
+  const initialValues = {
+    language: 'svelte',
+  };
 </script>
 
 <style lang="scss">
@@ -51,7 +55,7 @@
   }
 </style>
 
-<Form {schema} on:submit={handleSubmit} let:isSubmitting>
+<Form {schema} {initialValues} on:submit={handleSubmit} let:isSubmitting>
   <Input name="email" placeholder="Email" />
   <Input name="password" type="password" placeholder="Password" />
   <Select name="language" {options} />

src/components/Form.svelte

@@ -6,6 +6,7 @@
   import { setContext, createEventDispatcher } from 'svelte';
   import { writable } from 'svelte/store';
 
+  export let initialValues = {};
   export let schema = null;
 
   const dispatch = createEventDispatcher();
@@ -17,7 +18,7 @@
 
   setContext(FORM, {
     registerInput: name => {
-      $values[name] = '';
+      $values[name] = initialValues[name] || '';
       $touched[name] = false;
       $errors[name] = null;
     },
@@ -35,7 +36,7 @@
 
   function resetForm() {
     Object.keys($values).forEach(name => {
-      $values[name] = '';
+      $values[name] = initialValues[name] || '';
       $errors[name] = null;
       $touched[name] = false;
     });

tests/Form.spec.js

@@ -55,6 +55,17 @@ describe('Form', () => {
     });
   });
 
+  it('sets initial values', async () => {
+    const { component } = render(App, {
+      props: { initialValues: { email: '[email protected]' } },
+    });
+
+    expect(component.form.$$.ctx.$values).toEqual({
+      email: '[email protected]',
+      language: '',
+    });
+  });
+
   it('unregisters when field is removed', async () => {
     const { component, getByText, getByPlaceholderText } = render(App);
 

tests/TestApp.svelte

@@ -3,6 +3,7 @@
 
   export let onSubmit = () => {};
   export let schema = null;
+  export let initialValues = {};
   export let showOptionalField = false;
   export let form = null;
 
@@ -13,7 +14,12 @@
   ];
 </script>
 
-<Form {schema} on:submit={onSubmit} let:isSubmitting bind:this={form}>
+<Form
+  {schema}
+  {initialValues}
+  on:submit={onSubmit}
+  let:isSubmitting
+  bind:this={form}>
   <Input name="email" placeholder="Email" />
   {#if showOptionalField}
     <Input name="optional" placeholder="Optional" />