Form management

Overview

Mechanism responsible for managing form data. It provides 3 important functionalities:

• Storing control state in a form of JavaScript objects in store
• Validation with rendering error messages
• Form submission

It provides sets of wrapper components that connect plain html control elements with JavaScript to make form validation and form submission much simpler. Users can also use a dedicated JavaScript API to update form state manually.

Storing controls data

Html form data is stored as simple JavaScript objects in a store, which serves as a state management mechanism. This makes it much simpler to access and modify their state. Users also have access to methods that allow them to manually modify and retrieve data form a store.

Example

Below we can see a simplified example of an input control represented as a JavaScript object.

HTML

<input type="text" name="firstname" value="Jon" required />

JavaScript

const control = {
    name: 'firstname',
    type: 'text',
    value: 'Jon',
    disabled: false,
    required: true,
    readonly: false,
    hidden: false,
    errors: undefined
}

Connecting html element with JavaScript

We typicaly avoid manual modifications of these objects. Instead, we use sets of web-components that connect our html elements to the whole form management mechanism. Their primary responsibility is to register our html control elements, update its state and synchronize with store whenever the state is modified.

These components are:

• form-connector
• control-connector
• control-errors

Validation

The form manager handles control validation automatically. Validation occurs during form submission, and if errors are detected, the submission is prevented. Additionally, each control is automatically validated when it loses focus. This behavior can be customized using dedicated attributes.

General validation occurs via the following validation attributes:

Attribute name	Type	Default	Description
disabled	boolean	-	If control should be disabled set it to true
required	boolean	-	If control should be required set it to true
readonly	boolean	-	If control should be readonly set it to true
hidden	boolean	-	If control should be hidden set it to true
validation-name-label	string	-	Used to identify the control in validation messages or processes

Validation can be configured for each form control with specific attributes that control-connector takes.