Extending Felte

You might have noticed that both reporters and validators make use of the extend property in the configuration for useForm. This is because both of these make use of Felte's extensibility. We will call any package that extends Felte an extender from now.

An extender is a simple function that gets called when useForm is called, when the form action is called and whenever the form changes.

function extender({
  form,
  controls,
  stage,
  data,
  errors,
  warnings,
  touched,
  config,
  addValidator,
  addTransformer,
  setFields,
  validate,
  reset,

  // Since 1.2.0
  isValid,
  isValidating,
  isSubmitting,
  isDirty,
  interacted,
  handleSubmit,
  createSubmitHandler,
}) {
  // ...
  return {
    destroy() {
      // ...
    },
    onSubmitError(errors) {
      // ...
    },
  }
}

If you're subscribing to any store, or adding any event listeners in the extender, you will want to unsubscribe and/or remove any event listeners in the destroy function that you can return from the extender. If you're not using any events or subscribing to any store, you don't need to set this.

If you want to perform an action whenever there are errors on a submit event (e.g. server validation), you can handle them in the onSubmitError function. This will receive the current values contained in the errors store.

You may check Felte's repo and go over any validator or reporter source code. You'll find they're quite simple.

NOTE: If you check the validator packages you'll notice that you can change the signature of the configuration object for useForm in order for it to be used by your extender.