Формы

субтитра

Constructor

как создать

new notBulma.Frame.UIForm({target: HTMLElement, props: Object});

Props

что можно задавать

form: Object = {}
список полей формы и их свойства
{
...
 country: { //название поля для использования в fields
   component: 'UISelect',       //название компонента (из COMPONENTS) для рендеринга
   multiple: false,             //выбор сразу нескольких вариантов
   variantsSource: 'countries', //название коллекции в variants, актуально для notForm
   label: 'country_name',       //название. строка или метка из LOCALE
   enabled: true,               //активно или нет
   visible: true,               //видимо или нет
   required: true,              //обязательно или нет
   validated: false,            //проходило ли проверку
   valid: true,                 //результат проверки
   errors: false,               //ошибки, либо false, либо массив строк с сообщениями об ошибках
   value: 2,                    //значение
   variants: [                  //варианты для выбора из списка
     {
       id: 1,                   //идентификатор
       title: 'UI'              //название
     },
     ...
   ],
 },
 ...
}
fields: Array[String] = []
структура формы. каждый элемент строка, если элемент массив строк, то они выводятся в одной строке
[
[name, age],
[email, telephone]
bio,
agreed
]
loading: boolean = false
индикатор загрузки. для показа обращения к серверу
loader: string = 'container'
как показывать индикатор загрузки. container - в блоке формы page - на всю страницу hidden - не показывать
SUCCESS_TEXT: String = 'Операция завершена'
сообщение об успешном заполнении/отправке на сервер данных формы
WAITING_TEXT: String = 'Отправка данных на сервер
сообщение о провале заполнения/отправки на сервер данных формы
title: String = 'Форма'
заголовок формы
description: String = 'Заполните пожалуйста форму'
краткое описание формы
buttonsFirst: boolean = false
выводить ли кнопки над полями формы
horizontal: boolean = false
горизонтальные поля. название: поле ввода - в одну строку.
submit: Object = {caption: 'Отправить', enabled: true }
кнопка отправить
cancel: Object = {caption: 'Назад', enabled: true}
кнопка отменить

Методы

что можно вызывать

collectData(): Object
возвращает данные формы
setFieldInvalid(fieldName, value, errors): void
устанавливает ошибку поля ввода и значение, не генерирует события
setFieldValid(fieldName, value): void
устанавливает поле валидным и значение, не генерирует события
isFieldValid(fieldName): boolean
валидно ли поле
setFormFieldInvalid(fieldName, errors): valid
устанавливает ошибку, генерирует событие 'field.invalid'
setFormFieldValid(fieldName): valid
отмечает поле валидным, генерирует событие 'field.valid'
updateFormValidationStatus(result): void
обновляет статус формы, result: typeof FormValidationSession.getCompleteResult()
showSuccess(): void
показывает сообщение об успешном завершении заполнения формы/ отправки на сервер
setLoading(): void
устанавливает статус загрузки, показывает заставку
resetLoading(): void
отменяет статус загрузки, скрывает заставку
setFieldsVisibility(fieldsList:Array[String], val:boolean): void
устанавливает видимость списка полей
setVisibleFields(fieldsList:Array[String]): void
делает поля из списка видимыми
setInvisibleFields(fieldsList:Array[String]): void
делает поля из списка невидимыми
setFieldValue(fieldName, value): void
устанавливает значение поля, генерирует событие 'change'

События

что можно слушать

field.invalid
{detail:{fieldName:string}} - название поля признаного невалидным
field.valid
{detail:{fieldName:string}} - название поля признаного валидным
change
{detail: {field: string, value: any}} - изменение значения поля
submit
{detail: Object } - нажатие кнопки отправить, передаются данные формы
reject
нажатие кнопки отмена, ничего не передаётся в параметрах