json-form.md

Формы в формате json

Выражения

Выражения - важная концепция описания форм, используемая для многих полей. В динамической форме некоторые параметры могут зависеть от значений других полей этой же формы. Например, видимость поля ввода промо-кода определяется исходя из состояния галочки "Промо код". Для описания такого поведения и используются выражения.

{
    "name": "ref_code",
    "visible": [
        {
            "expression": [
                ["use_ref_code", "=", true]
            ],
            "result": true
        }
    ]
}

В примере выше видимость переменной (visible) является не фиксированным значением, а массивом выражений (в примере массив состоит из одного элемента, но их может быть сколько угодно). Каждое выражение содержит массив условий expression. Условие, в свою очередь, представляет из себя массив строго из 3 элементов. Первый элемент - название (name) поля, от значения которого зависит условие. Второй элемент - оператор сравнения. Допустимы 6 операторов - =, !=, >, <, >=, <=. Последние 4 оператора работают корректно только с числами. Третий элемент - значение для сравнения. Если выражение, описанное тремя этими элементами истино, то в значение переменной visible подставляется result из этого условия. Если в выражении описано несколько разных условий, то выражение вернет значение result если все описанные условие вернут истину. Если выражений несколько, то будут обрабатываться все до первого, вернувшего result.

Формат поля

Каждое поле - объект с одним обязательным полем name, значение которого должно быть уникальной строкой в рамках формы. Полное описание поля выглядит следующим образом:

{
    name: string, // уникальное имя поля
    placeholder?: string, // Строка, выводимое в поле ввода при пустом значении
    hint?: string, // Подсказка, всплывающая по наведению на иконку (?)
    defaultValue?: string | number | boolean, // Значение поля по умолчанию
    label?: string | TCalculate<string>, // Заголовок поля. Может быть выражением (здесь и далее тип данных TCalculate - выражение)
    type?: 'text' | 'email' | 'number' | 'phone' | 'hidden' | 'select' | 'checkbox' | 'radio' | 'file' | 'submit' | TCalculate<TElementType>, // Тип поля, может быть выражением
    options?: [{
        value: string | number,
        label: string
    }] | TCalculate<TOptionData | TOption[]>, // Варианты значений для выпадающего списка (type === 'select') или радиокнопок (type === 'radio'). Массив значений содержит поля label (название пункта, которое видит пользователь) и value (значение, которое будет отправлено на сервер при выборе соответствующего пункта). Может быть выражением
    multiple?: boolean, // Выбор нескольких файлов. Работает только с type === 'file'
    accept?: string, // Доступные форматы файлов для загрузки. Доступно только с type === 'file'
    visible?: boolean | TCalculate<boolean | string>, // Видимость поля. Может быть выражением
    disabled?: boolean | TCalculate<boolean | string>, // Доступность поля для редактирования. Может быть выражением
    validation?: { // Валидация поля
        email?: boolean | TCalculate<boolean>, // Валидация электронной почты. Может быть выражением
        required?: boolean | TCalculate<boolean>, // Помечает поле как обязательное для ввода. Может быть выражением
        length?: number | TCalculate<number>, // Устанавливает допустимое кол-во символов поля. Может быть выражением
        min?: number | TCalculate<number>, // Минимальная длина строки или минимальное число для type === 'number'
        max?: number | TCalculate<number>, // Максимальная длина строки или максимальное число для type === 'number'
        pattern?: string[] | TCalculate<string[]> // Валидация поля по регулярному выражению. Массив из 2 строк: первая само регулярное выражение, вторая - ключи поиска. Например, ["^[\+]?[0-9]{1,3}[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{3,6}$", "im"]. Может быть выражением
    },
    submit?: boolean // При false значение поля не будет отправлено на сервер при отправке формы
}

Форма

Форма - это объект, состоящий из массива fields, который должен содержать в себе описание всех полей формы. В общем виде выглядит так

{
    "fields": [
        {
            "name": "login_type",
            "submit": false,
            "type": "select",
            "options": [
                {
                    "value": "email",
                    "label": "Login by email"
                },
                {
                    "value": "phone",
                    "label": "Login by phone"
                }
            ]
        },
        {
            "name": "email",
            "label": "email",
            "validation": {
                "required": [
                    {
                        "expression": [
                            ["login_type", "=", "email"]
                        ],
                        "result": true
                    }
                ],
                "email": true
            }
        },
        {
            "name": "phone",
            "label": "phone",
            "validation": {
                "required": [
                    {
                        "expression": [
                            ["login_type", "=", "phone"]
                        ],
                        "result": true
                    }
                ]
            }
        },
        {
            "name": "password",
            "label": "Password",
            "validation": {
                "required": true
            }
        }
    ]
}

Форма, описанная выше содержит один выпадающий список с выбором авторизации (по почте или по телефону) и три поля ввода - для e-mail (поле обязательно для ввода если в выпадающем списке выбрана авторизация по e-mail), для телефона (поле обязательно, если в выпадающем списка выбрана авторизация по телефону) и поле для ввода пароля, обязательное всегда