Skip to main content

API

<inform-el>‚Äč

Attributes‚Äč

  • error-disable-submit (boolean, true if present): Set this in order to automatically disable the submit button while any of the <inform-field> shows an error.
  • reset-on-submit (boolean, true if present): Set this in order to automatically reset the form after submit.
  • default-submit (boolean, true if present): Required when using Remix's <Form/> compopnent. See usage in Remix docs.

The attributes below are automatically set:

  • submitting (boolean, true if present): Set while the form is sending an AJAX request (based on the <form> action and method attributes). Can be used to show a loading state.
  • invalid (boolean, true if present): Set while the form invalid.
  • dirty (boolean, true if present): Set while the form dirty.

action and method are native forms attribute but must be specified on the <form> element, if applicable.

Events‚Äč

eventcontent of detail fielddescription
informel-readynoneThe component has been initialized and is ready to be used. Wait for this event before calling any method.
inform-input
  • values¬†the form values
  • changedField¬†the name of the field that changed
See input event
inform-change
  • values¬†the form values
  • changedField¬†the name of the field that changed
See change event
inform-submit
  • values¬†the form values
  • submitter¬†the DOM element that triggered the submit (like the submit button), or null if the submit was triggered programmatically. ¬†Not supported in Safari before version 15.4
See submit event
request-start
  • values¬†the form values
The form AJAX request (based on action and method form attributes) has started. Can be used to display a loading state.
request-end
  • values¬†the form values
The form AJAX request (based on action and method form attributes) has ended. Can be used to hide the loading state.
request-success
  • values¬†the form values
  • response¬†the json response
  • status¬†the http status
The form AJAX request has succeeded (status 2XX)
request-error
  • values¬†the form values
  • response¬†the json response
  • status¬†the http status
  • error¬†the exception if there was one
The form AJAX request has failed (status != 2XX) or there was an exception

All the native events also bubble up to <inform-el>.

Methods‚Äč

requestSubmit()‚Äč

Try to submit the form, if valid. Equivalent to clicking on a submit button.

reset(newValues?)‚Äč

Resets the form. If newValues is provided the form will be reset to the provided values. If no newValues are provided, the form will reset to the last reset value or to the initial values.

The dirty and invalid and touched states are also reset.

setValues(newValues)‚Äč

Sets form values, without resetting.

Properties‚Äč

The submitting, dirty and invalid attributes mentioned above are also exposed as properties.

validationHandler‚Äč

Function that receives the current form values and returns the errors in the format:

{
fieldName: 'Error description';
}

Example:

document.querySelector('inform-el').validationHandler = ({ values }) => ({
password_repeat: values.password !== values.password_repeat ? 'Passwords must match!' : '',
});

The above will display the "Passwords must match!" error next to the password_repeat field if it's not identical to the password field.

zodSchema‚Äč

Receives a zod schema. Example:

document.querySelector('inform-el').zodSchema = z.object({
first_name: z.string().min(1, { message: "Firstname is required" }),
last_name: z.string().min(1, { message: "Lastname is required" }),
email: z.string().min(1, { message: "Email is required" }).email({
message: "Must be a valid email",
}),
password: z
.string()
.min(6, { message: "Password must be atleast 6 characters" }),
terms: z.literal(true, {
errorMap: () => ({ message: "You must accept Terms and Conditions" }),
}),
});

submitTransform‚Äč

Function called before submit. It receives the form values and returns the transformed data to send to the backend.

Example:

document.querySelector('inform-el').submitTransform = (values) => ({
...values,
fullName: values.firstName + ' ' + values.lastName,
});

<inform-field>‚Äč

Attributes‚Äč

  • submit-on-change (boolean, true if present): If present, the form will be submitted whenever this field has changed (as part the change event)
  • touched-on-input (boolean, true if present): If present, the field will be set to touched (and validation errors shown) on the first keystroke (input event). If not present (default), the field is set to touched on blue (change event).
  • name (string): The name of the field, when using a custom form control. Use the field only in that case. Otherwise set the name attribute on the form control (like <input /> or <select />).
  • default-error (string): Error message to display when this field is in error, regardless of the error.
  • bad-input (string): Error message to display when this field ValidityState is badInput.
  • pattern-mismatch (string): Error message to display when this field ValidityState is patternMismatch.
  • range-overflow (string): Error message to display when this field ValidityState is rangeOverflow.
  • range-underflow (string): Error message to display when this field ValidityState is rangeUnderflow.
  • step-mismatch (string): Error message to display when this field ValidityState is stepMismatch.
  • too-long (string): Error message to display when this field ValidityState is tooLong.
  • too-short (string): Error message to display when this field ValidityState is tooShort.
  • type-mismatch (string): Error message to display when this field ValidityState is typeMismatch.
  • value-missing (string): Error message to display when this field ValidityState is valueMissing.

The attributes below are automatically set:

  • touched (boolean, true if present): If present, this field has been "touched" (blurred at least once), or a submission attempt has been made.
  • error (boolean, true if present): If present, this field is invalid and the error is displayed (error is only displayed when the field has been touched).