EnForm

Preview

Props

Name	Description	Default	Control
isSubmitting	Whether or not to render the 'loading spinner' icon indicating that the form is in the middle of a submit process. boolean	false	truefalse
validateOnMount	Validates form immediately on mount. boolean	false	truefalse
horizontal	Sets the layout of the fields in the form by adding the 'form-horizontal' css class boolean	false	truefalse
labelClass	Sets the class used for the label column when using horizontal layout. string	"col-md-3"
inputClass	Sets the class used for the input column when using horizontal layout. string	"col-md-9"
showRequired	Displays asterisk (*) next to required field labels boolean	true	truefalse
displayOnly	Sets all inputs in the fields json to display only. Also hides submit and cancel buttons. boolean	false	truefalse
submitText	Sets the readable text for the default submit button. string	"Submit"
submitClass	Sets the CSS class for the default submit button. string	"btn-success"
cancelText	Sets the readable text for the default cancel button. string	"Cancel"
cancelClass	Sets the CSS class for the default cancel button. string	"btn-link"
errorMessage	Sets the bottom error message when a form is submitted with validation errors. string	"Please fix all errors before submitting."
renderSubmitButton	Whether or not to render the submit button responsible for the submit event for the form. boolean	true	truefalse
renderCancelButton	Whether or not to render the cancel button responsible for the cancel event for the form. boolean	false	truefalse
preventMultiSubmit	Adds double-click protection to form submit button, in the form of preventing a second submit. Form will need to be re-rendered via a page reload or key change in order to reset. boolean	true	truefalse
formGroupClass	Sets class for each dynamically created form group. Use this to create additional columns of fields. string	"col-12"
disableSubmit	Disables submit button and form submit event. boolean	false	truefalse
disableForm	Disables form and removes submit button. boolean	false	truefalse
inModal	Sets CSS classes so that component can be used within a modal without needing to separate the buttons. boolean	false	truefalse
useTrackedJson	Uses internally tracked JSON values from the form for the returned data instead of serializing the form DOM. boolean	false	truefalse
showRequiredLegend	Shows the required legend at the top of the form when showRequired is true. boolean	false	truefalse
fields	An array of objects containing the entries for the form. Each object will map to the props of any 'EnInput*' component. array<Field>	unknown	complex object

Slots

form-top

Places content above the form

Variables

Name	Type	Description
errors	array	An list of error messages from invalid fields.
meta	object	The current validation state of the form.

fields

Slot to add all fields of the form. The parent container has the `flex-row` class which requires direct children to have `col*` classes. See examples for further explanation.

Variables

Name	Type	Description
fields	array.<Field>	A list of fields passed to the component via json.
inputGroupProps	array.<object>	The input group props that set layout values for a form group component.

<dynamic:setSlotName(field)>

No description

Variables

Name	Type	Description
name	unknown	—
field	unknown	—

buttons

Replaces default buttons.

Variables

Name	Type	Description
submitForm	function	Method that can be used to submit the form
meta	object	The current validation state of the form.
resetInitialState	function	Resets the form back to its initial values and resets validation

additional-buttons

Places additional buttons after the default buttons.

Variables

Name	Type	Description
meta	object	The current validation state of the form.
resetInitialState	function	Resets the form back to its initial values and resets validation

form-bottom

Places content below the form and buttons.

Variables

Name	Type	Description
errors	array	An list of error messages from invalid fields.
meta	object	The current validation state of the form.

setSlotName(field)

Dynamic field created for each field passed in by json. Slot names are generated in `kebab-case`

Variables

Name	Type	Description
field	unknown	The field object from the list of fields

Events

submit

Submit event.

Payload

Name	Type	Description
data	object	The serialized data from the form by name attribute of each field.
resetFormState	function	Convenience method to reset the form state back to clean and allow a subsequent submission.

validated

Emitted after the form validates, without form submission

Payload

Name	Type	Description
valid	boolean	If the form is valid or not
errors	array	List of current field errors

Methods

Name	Description
hasError	Returns a boolean for if the form is currently showing invalid.
validate	Dynamically validate the form.
submitForm	Used to dynamically submit the form, usually from another component using a ref to this component.
resetFormState	Resets the validation state of the form, useful for creating a fresh set of validation flags.
resetInitialState	Resets the validation state of the form, useful for creating a fresh set of validation flags.
setErrors	Sets field error messages based on key value pairs of field name and array of string error messages.

Examples

Using an external submit button

Exposing form state

Creating field layouts

Horizontal form layout

Although we are trying to stay away from using this layout, there may be a need to still use it.

Easiest option is to pass down the labelClass and inputClass from the EnForm props using the slot variable within the fields slot. The below example just uses the preset defaults that EnForm has.