Form ​

As previously stated, Form is the main mechanism you will be using. Forms work built on the event system, which allows you to catch changes in any child element. Mechanism subscribe / unsubscribe allow you to create a tree-like form system of any nesting.

Initialization ​

For the initial installation, you need to create an instance of Form:

import Form from "./Form";

const form = new Form()

import Form from "./Form";

const form = new Form()

Now you can add FormField to the page, and they will automatically interact with form. Familiarize yourself with them you can here.

Options ​

For flexible work with the form, you can pass the settings:

const form = new Form(params)

const form = new Form(params)

params Optional ​

An object with the following properties:

Subscribing to a form ​

Subscription to the form occurs automatically. However, there are situations when this mechanism is not available. For example, when we create two different forms in one place. What form will be the main one in this case?

The following methods are used for this:

• subscribe - accepts a child to be subscribed to the form. Returns a function to unsubscribe from:

import Form from "./Form";

const form = new Form();
const child = new Form({ name: "address" });

form.subscribe(child);

import Form from "./Form";

const form = new Form();
const child = new Form({ name: "address" });

form.subscribe(child);

• unsubscribe - unsubscribes the element from the form.

form.unsubscribe(child);

form.unsubscribe(child);

Or you can use the function returned by subscribe:

const offChild = form.subscribe(child);
offChild(); // form.unsubscribe(child);

const offChild = form.subscribe(child);
offChild(); // form.unsubscribe(child);

Internal form properties ​

For convenient work, properties have been added that you can use in your work to read and change.

name Read-only ​

The name of the entity to which the form belongs. Automatically set on creation if the name parameter was passed. Relying on this parameter, child forms interact with the parent form.

parent Read-only ​

Link to the parent form.

id ​

Form identifier. This property is freely editable. To subscribe to an id change, use the onid method:

form.onid(newId => console.log('New id: ' + newId))

form.id = 1 // New id: 1
form.id = 2 // New id: 2

form.onid(newId => console.log('New id: ' + newId))

form.id = 1 // New id: 1
form.id = 2 // New id: 2

Also, changing this field creates a Form.EVENT_ID event, which you can also subscribe to:

form.on(Form.EVENT_ID, () => {});

form.on(Form.EVENT_ID, () => {});

version ​

Version of the current form. Similar to id, this property is freely editable and has a built-in callback onversion and Form.EVENT_VERSION event:

form.on(Form.EVENT_VERSION, () => console.log("Upgrade."))
form.onversion(v => console.log('Version: ' + v));

form.version = 15; // upgrade. Version: 15

form.on(Form.EVENT_VERSION, () => console.log("Upgrade."))
form.onversion(v => console.log('Version: ' + v));

form.version = 15; // upgrade. Version: 15

wait Read-only ​

Accepts true or false, changes during read/save. When changing this property event Form.EVENT_WAIT is created:

form.on(Form.EVENT_WAIT, () => {...})

form.on(Form.EVENT_WAIT, () => {...})