Skip to content

Form

Как было ранее сказано, Form - основной механизм, который вы будете использовать. Работа форм построена на событийной системе, что позволяет отлавливать изменения в любом дочернем элементе. Механизм subscribe / unsubscribe позволяют создавать древовидную систему form любой вложенности.

Инициализация

Для первоначальной установки необходимо создать экземпляр Form:

ts
import Form from "./Form";

const form = new Form()
import Form from "./Form";

const form = new Form()

Теперь вы можете добавлять FormField на страницу и они автоматически будут взаимодействовать с form. Ознакомится с ними вы можете ЗДЕСЬ ХХХХХХ.

Параметры

Для гибкой работы с формой вы можете передать настройки:

ts
const form = new Form(params)
const form = new Form(params)

params Необязательный

Объект имеющий следующие свойства:

_

name Вариативный

Название сущности(поля), которое будет использоваться, если данная форма будет выступать в качестве потомка и будет подписана на другую форму.

Является не обязательным, если для данной формы нет родительской формы или установлен флаг parent в null.

parent Необязательный

Принимает следующие значения: Form или null, false. В случае, если была передана другая Form, то произойдёт подписание именно на неё, а не автоматический поиск родительской формы. В иных случаях(null, false) данная форма не будет производить поиск предка.

provide Необязательный

Для автоматического подписания друг на друга формы использует механизм provide/inject добавленный в Vue 3. Если данный параметр установлен в значение false, то форма не будет уведомлять потомков о себе. Иными словами эта форма станет невидимой для дочерних элементов.

Подписка на форму

Подписка на форму происходит автоматически. Однако бывают ситуации, когда данный механизм не доступен. Например, когда мы создаём две разные формы в одном месте. Какая форма в таком случае будет главная?

Для этого используются следующие методы:

  • subscribe - принимает потомка, которого необходимо подписать на форму. Возвращает функцию, чтобы отписать от неё:
ts
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 - отписывает элемент от формы.
ts
form.unsubscribe(child);
form.unsubscribe(child);

Или можно воспользоваться функцией, которую вернул subscribe:

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

Внутренние свойства формы

Для удобной работы были добавлены свойства, которые вы можете использовать в своей работе для чтения и изменения.

name Только для чтения

Название сущности к которой относится форма. Автоматически устанавливается при создании, если был передан параметр name. Полагаясь на этот параметр дочерние формы взаимодействуют с родительской.

parent Только для чтения

Ссылка на родительскую форму.

id

Идентификатор формы. Данное свойство свободно редактируется. Чтобы подписаться на изменение id, воспользуйтесь onid методом:

ts
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

Также изменение данного поля создаёт событие Form.EVENT_ID, на которое вы также можете подписаться:

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

version

Версия текущей формы. Аналогично с id, данное свойство свободно редактируется и имеет встроенный обратный вызов onversion и событие Form.EVENT_VERSION:

ts
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 Только для чтения

Принимается значение true или false, изменяется в процессе read/save. При изменении данного свойства создаётся событие Form.EVENT_WAIT:

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

Released under the MIT License.