Extending Felte
NOTE: This API is not set in stone yet. It is open for change on feedback or future needs.
If you're a package author and this API is missing any feature, please do open an issue or make a pull request.
You might have noticed that both reporters and validators make use of the extend property in the configuration for createForm. 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 createForm is called, when the form action is called and whenever the form changes.
function extender({
form,
controls,
data,
errors,
touched,
config,
}) {
// ...
return {
destroy() {
// ...
},
onSubmitError(errors) {
// ...
},
}
}formrefers to the HTMLFormElement of the form you're handling. The first time the extender is called, this will beundefined. Whenever theformaction is called (and on any subsequent call) this will contain the appropriate element.controlsrefer to the the form controls of the form that are handled by Felte. The first time the extender is called, this will beundefined. Whenever theformaction is called (and on any subsequent call) this will contain the appropriate elements.datais the samedatastore thatcreateFormreturns.errorsis the sameerrorsstore thatcreateFormreturns.touchedis the sametouchedstore thatcreateFormreturns.configis the configuration object passed by the user tocreateForm.
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
validatorpackages you'll notice that you can change the signature of the configuration object forcreateFormin order for it to be used by your extender.