Setup two-way binding with form

src/Form.svelte

@@ -1,21 +1,21 @@
 <script context="module" lang="typescript">
   export interface Field {
-    label: string,
+    name: string,
     value: string | null,
     placeholder?: string,
-    type: string,
     editable: boolean
   }
 </script>
 
 <script lang="typescript">
   import { createEventDispatcher } from 'svelte';
+  import { capitalize } from '@app/utils';
 
   export let fields: Field[];
   export let editable = false ;
 
   const dispatch = createEventDispatcher();
-  const save = () => dispatch('save');
+  const save = () => dispatch('save', fields);
   const cancel = () => dispatch('cancel');
 </script>
 
@@ -78,12 +78,12 @@
 <div class="fields">
   {#each fields as field}
     <div class="label">
-      {field.label}
+      {capitalize(field.name)}
     </div>
     <div>
-      <input class="field" placeholder={field.placeholder}
-             disabled={!field.editable || !editable}
-             type={field.type} value={field.value} />
+      <input name={field.name} class="field" placeholder={field.placeholder}
+             disabled={!field.editable || !editable} bind:value={field.value}
+             type="text" />
     </div>
   {/each}
 </div>

src/base/register/Registration.svelte

@@ -19,16 +19,18 @@
     .then(registration => {
       if (registration) {
         fields = [
-          { label: "Address", type: "text", placeholder: "Not set",
+          { name: "address", placeholder: "Not set",
             value: registration.address, editable: true },
-          { label: "Owner", type: "text", placeholder: "",
+          { name: "owner", placeholder: "",
             value: registration.owner, editable: false },
         ];
       }
       return registration;
     });
 
-  const save = () => {};
+  const save = (event: { detail: Field[] }) => {
+    console.log("Save", event.detail);
+  };
 
   $: isOwner = (registration: Registration): boolean => {
     return registration.owner === ($session && $session.address);

src/utils.ts

@@ -10,3 +10,8 @@ export function formatAddress(addr: string) {
     + '...'
     + addr.substring(addr.length - 4, addr.length);
 }
+
+export function capitalize(s: string) {
+  if (s === "") return s;
+  return s[0].toUpperCase() + s.substr(1);
+}