formShape

Описание

Опциональный. Массив объектов, содержащих настройки для конфигурирования полей в диалоге Booking

Использование

formShape: [{
    comp: "text" | "textarea",
    key: string,
    label?: string,
    required?: boolean,
    validation?: (value: any) => boolean,
    errorMessage?: string
}];

Параметры

Для каждого поля можно указать следующие параметры:

• comp - (обязательный) тип поля (text или textarea)
• key - (обязательный) идентификатор поля
• label - (опциональный) метка поля
• required - (опциональный) если значение установлено в true, поле не должно быть пустым и его необходимо заполнить для отправки формы бронирования; если false, поле может быть пустым
• validation - (опциональный) функция, которая принимает значение поля и возвращает булево значение; поле считается валидным, когда функция возвращает true
• errorMessage - (опциональный) сообщение, отображаемое когда значение не проходит валидацию

Конфигурация по умолчанию

const defaultFormShape = [
    {
        comp: "text",
        key: "name",
        label: "Name",
        required: true,
        validation: val => {
            return !!val.replace(/\s/g, "");
        },
        errorMessage: " should not be empty"
    },
    {
        comp: "text",
        key: "email",
        label: "Email",
        required: true,
        validation: val => {
            const regEx = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
            return val && regEx.test(val);
        },
        errorMessage: " should contain valid email address"
    },
    {
        comp: "textarea",
        key: "description",
        label: "Description"
    }
];

Пример

const formShape = [
    {
        comp: "text",
        key: "name",
        label: "Name"
    },
    {
        comp: "text",
        key: "contact",
        label: "Mobile"
    },
    {
        comp: "textarea",
        key: "description",
        label: "Details"
    },
];

new booking.Booking("#root", {
    data,
    formShape,
    // другие параметры
});

Фрагмент ниже показывает, как настроить поля в диалоге Booking: