'Is it possible to update component variables from within Svelte action?

Can actions update component variables? For example, in the App.svelte below is it possible to update values of disabled and errors?

<script>
  import { form } from './use-form'

  let disabled
  let errors = {}

  const submit = e => {
    const formData = new FormData(e.target)

    const data = {}
    for (let field of formData) {
      const [key, value] = field
      data[key] = value
    }
    console.log(data)
    e.target.reset()
  }
</script>

<form on:submit|preventDefault={submit} use:form={[disabled, errors]}>
  <input name="email" type="email" required />
  {#if errors && errors.email} <p>{errors.email}</p>{/if}
  <input name="password" type="text" minlength="8" required />
  {#if errors && errors.password} <p>{errors.password}</p>{/if}
  <hr />
  <button formnovalidate disabled={!disabled}>submit</button>
</form>

Here's the use-form action:

export const form = (node, [disabled, errors]) => {
  let inputs = node.querySelectorAll('input:invalid')

  const handleBlur = event => {
    ;[...inputs].forEach(e => {
      if (e.value.length === 0) {
        return
      } else {
        errors[e.name] = e.validationMessage
      }
    })

    disabled = node.checkValidity()
  }

  const handleInput = event => {
    ;[...inputs].forEach(e => {
      if (e.value.length === 0) {
        return
      } else {
        errors[e.name] = e.validationMessage
      }
    })

    disabled = node.checkValidity()
  }

  document.addEventListener('blur', handleBlur, true)
  document.addEventListener('input', handleInput, true)

  return {
    update: (disabled, errors) => {
      return disabled, errors
    },
    destroy: () => {
      document.removeEventListener('blur', handleBlur, true)
      document.removeEventListener('input', handleInput, true)
    },
  }
}

To better illustrate what I'm trying to achieve here's a repel with a crude working solution albeit all is sandwiched in one file.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source