Initial validation does not work as expected

[kimskovhusandersen]

Hi Sascha,

When rendering the form initially with validateInitialValues: true, the $invalid stores is empty and $invalid.get("bwcl_employee") returns undefined.

When selecting a different value and then selecting the initial value ("undefined") again, the errors shows correctly:
ValidationError: bwcl_employee is a required field

I'm using

• svelte-formup version 0.6.2,
• svelte version 3.32.0, and
• yup version 0.30.0

Here is my code:

<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)}