Forms

Form architecture

The CFormComponent is listening on events of all containing elements and will update its persistent state with the new data:

1. A form component will dispatch an updateFormData event, which is catched by its form

2. The form will fetch the data of the target component by calling its formData getter / property

3. The form will update its formData with the new state received from the form component

Form components

To develop a form component, you’ve to ensure the following requirements are met:

1. Implement a formData getter which returns the data

2. Send an updateFormData event when the data has changed

Hint

Please note that you don’t need to send an initial updateFormData event, as the initial form data is automatically fetched when the form or one of its component is initialised. You only have to ensure that you send the event when the data is changed.

The formData getter must always return key-value object containing the data, where the key is used as parameter name and the value as parameter value. Values can either be single values (e.g. a single text input) or a list of values (e.g. multiple checkboxes):

{
    "name": "Translucent",
    "version": "1.0.0",
    "technologies": ["ES6", "HTML", "CSS"]
}