Arguments
Form class initialized with 3 objects: required model, optional resources and optional settings
import Form from '@jafar/form';
const model = { /*...*/ };
const resources = { /*...*/ };
const settings = { /*...*/ };
const form = new Form();
await form.init(model, resources, settings);
Model is a Json representation of a specific form, and Resources is an object which contains all handlers that model declare of and need during
its lifecycle.
Note: There are few reasons why form definition was split into 2 objects such a form persistency, server validation, undo operation, have the ability to easily understand existing form logic, quick development and the ability to create more tools and operations using the model.
Model
Json representation of form. Object contains:
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | 'form-${x}' | A unique id of a form in a page. More info |
| data | object | {} | Data to manipulate by the form which contains fields values. More info |
| context | object | {} | App data that the fields might depend on during the form's lifecycle. More info |
| fields | required object | {} | Fields on the form. More info |
| errors | array | [] | Reflects the field's errors in the form. More info |
| invalid | boolean | false | Flag that reflects if the form is invalid. More info |
| dirty | boolean | false | Flag that reflects if the form is dirty. More info |
| processing | boolean | false | Flag that reflects if the form is busy with processing pending actions. More info |
| pendingActions | array | false | Reflects form's pending actions to process (for example change value). More info |
| initializedData | object | {} | Reflects form's data after init action done (data might change during it using dependenciesChange handler). |
| prevData | object | {} | Reflects form's data prior to the last action processed. |
Resources
Object which contains all handlers that model declare of and need during its lifecycle. Object contains:
| Name | Type | Default | Description |
|---|---|---|---|
| components | object | {} | Contains all components that field uses during the form's lifecycle. More info |
| validators | object | {} | Contains all field's validators handlers. More info |
| terms | object | {} | Contains all field's terms handlers (such as exclude, disable and require terms). More info |
| conversions | object | {} | Contains all field's conversions handlers (used by field's formatters and parsers). More info |
| dependenciesChanges | object | {} | Contains all field's dependenciesChange handlers. More info |
| hooks | object | {} | Contains form hooks handlers. More info |
Settings
Jafar settings overrides. Object contains:
| Name | Type | Default | Description |
|---|---|---|---|
| changeValueDebounceWait | number | 250 | Debounce ms when calling changeValue action |
| changeValueDebounceMaxWait | number | 60000 | Debounce max ms when calling changeValue action |
| changeStateDebounceWait | number | 250 | Debounce ms when calling changeState action |
| changeStateDebounceMaxWait | number | 60000 | Debounce mac ms when calling changeState action |