bandolier-template/admin/bando/demos/Form.svelte

<script>
  import FormField from '$/client/components/FormField.svelte';
  import api from "$/client/api.js";

  let form = {
    full_name: "",
    password: "",
    subscribe: '0',
    email: "",
    notes: "",
    _valid: false,
    _errors: {main: ""},
  }

  // normally the rules are maintained on the /api/ and then added to the
  // form when there's an error.  See client/pages/Register.svelte for a good example
  form._rules = {
    full_name: "required",
    password: "required",
    subscribe: "required",
    email: "required|email",
    notes: "",
  }
</script>


<style>
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 3rem;
  }
</style>

<main>
  <form action="/api/user/profile" method="POST">
    <card>
    <top>
      <h1>Register</h1>
        <error>{ form._errors.main }</error>
    </top>


    <middle>
      <FormField form={ form } field="full_name" label="Full Name">
        <input type="text" id="full_name" bind:value={ form.full_name } name="full_name">
      </FormField>


      <FormField form={ form } field="password" label="Password">
        <input type="password" id="password" bind:value={ form.password } name="password">
      </FormField>


      <FormField form={ form } field="email" label="Email">
        <input type="email" id="email" bind:value={ form.email } name="email">
      </FormField>


      <FormField form={ form } field="notes" label="Notes">
        <textarea bind:value={ form.notes } name="notes" id="notes"></textarea>
      </FormField>

      <FormField form={ form } field="subscribe" label="Want Notifications?">
        <input type="checkbox" id="subscribe" name="subscribe" bind:checked={ form.subscribe }>
      </FormField>
    </middle>

    <bottom>
      <button-group>
        <button  data-testid="register-button"
                 on:click|preventDefault={ () => form = api.validate(form) }>Register</button>
      </button-group>
    </bottom>
    </card>
  </form>
</main>