kenoxa / svelte-formup Goto Github PK

<script lang="ts">
  import { object, string } from 'yup'
  import { formup } from 'svelte-formup'

  const schema = object().shape({
    bpm_comment: string().required(),
  })

  const { values, validate, invalid, errors, dirty, validity } = formup({
    getInitialValues: () => ({
      bpm_comment: undefined,
    }),
    validateOn: ['input', 'change'],
    schema,
    validateInitialValues: true,
    async onSubmit(data, _) {
      console.log({ data })
    },
  })

</script>

<form use:validate role="form">
  <div use:validity>
    <textarea
      id={'bpm_comment'}
      name="bpm_comment"
      label="Comment (optional)"
      rows={3}
      bind:value={$values.bpm_comment} />
  </div>
  <p>
    <button type="submit">Submit</button>  
    <button type="reset">reset</button></p>
</form>

{JSON.stringify({ values: $values, invalid: $invalid, errors: $errors, dirty: $dirty }, null, 4)}

<script lang="ts">
  import { object, string } from 'yup'
  import { formup } from 'svelte-formup'

  const schema = object().shape({
    bwcl_employee: object({
      id: string().required(),
      manager: object()
        .shape({
          id: string().required(),
        })
        .required(),
    })
      .required()
      .defined(),
  })

  schema.validate({}, { abortEarly: false }).catch((error) => {
    console.log({ error })
  })

  const { values, validate, invalid, errors, dirty, validity, isDirty, isError } = formup({
    getInitialValues: () => ({
      bwcl_employee: undefined,
    }),
    validateOn: ['input', 'change'],
    schema,
    validateInitialValues: true,
    onSubmit(data, _) {
      console.log({ data })
    },
  })
</script>

<form use:validate role="form">
  <div use:validity>
    <select id="bwcl_employee" name="bwcl_employee" bind:value={$values.bwcl_employee}>
      <option>please select</option>
      <option value={{ name: 'hans' }}>xy</option>
      <option value={{ id: 'xy', name: 'hans' }}>xy</option>
      <option value={{ id: 'zw', name: 'hans' }}>zw</option>
    </select>
    <p>{$invalid?.get('bwcl_employee')}</p>
  </div>
  <p><button type="submit">Submit</button> <button type="reset">reset</button></p>
</form>

{JSON.stringify({ values: $values, invalid: $invalid, errors: $errors, dirty: $dirty, isDirty, isError }, null, 4)}