Skip to content

Формы

Компонент форм умеет вмещать в себя кастомные компоненты форм, такие как:

  • input
  • textarea
  • checkbox
  • checkbox-group
  • select
  • rating

Ниже представлен вариант исполнения формы:

<ui-form
    from="{{ account.email }}"
    recaptcha-review="{{ review.captcha_enabled? }}"
    {% if review.captcha_enabled? %} recaptcha-review {% endif %}
    {% if comment.captcha_enabled? %} recaptcha-comment {% endif %}
    product-id="89869498"
>

    <ui-form-item
        name="name"
        label="simple text field"
        :rules="{
            required: true,
        }"
        value=""
    >
    </ui-form-item>

    <ui-form-item
        name="author"
        label="Фамилия"
        :rules="{
            required: true,
        }"
        value=""
    >
    </ui-form-item>

    <ui-form-item
        name="author"
        label="Имя"
        :rules="{
            required: true,
        }"
        value=""
    >
    </ui-form-item>

    <ui-form-item
        name="email"
        label="Эмэил"
        :rules="{
            required: true,
        }"
        value=""
    >
    </ui-form-item>

    <ui-form-item
        name="content"
        type="textarea"
        label="textarea field"
    >
    </ui-form-item>

    <ui-form-item
        name="radio"
        type="radio"
        label="radio field"
    >
    </ui-form-item>

    <ui-form-item
        name="content"
        type="radio-group"
        label="radio-group field"
        :options="[{ label: 'chose', value: '1' }, { label: 'wat', value: '2' }, { label: 'nom', value: 'wooop' }]"
        :rules="{
            required: true,
        }"
    >
    </ui-form-item>

    <ui-form-item
        name="content"
        type="checkbox"
        label="checkbox field"
        value="AAAAAAAAAAAAA"
        :rules="{
            required: true,
        }"
    ></ui-form-item>

    <ui-form-item
        name="content"
        type="checkbox-group"
        label="checkbox-group field"
        :options="[{ label: 'chose', value: '1' }, { label: 'wat', value: '2' }, { label: 'nom', value: 'wooop' }]"
        :rules="{
            required: true,
        }"
    ></ui-form-item>
</ui-form>

Особенности работы

Особенностью формы является "слияние" полей, т.е. если задать 2 компонентам <form-item> Одинаковый name то их названия и значения при отправке сольются в 1 строку через пробел. Пример мы можем посмотреть тут:

<ui-form-item
    name="author"
    label="Фамилия"
    value=""
>
</ui-form-item>

<ui-form-item
    name="author"
    label="Имя"
    value=""
>
</ui-form-item>

После отправки придет письмо с Фамилия Имя: Иванов Иван Массивы значений будут перечисляться через запятую. Соответственно все поля в поле content тоже будут обьединяться, но каждое поле будет начинаться с новой строки.

Настройки

Настройки формы:

  • send-method- назначение формы. Может быть 3 варианта: message,review,comment. По-умолчанию message.
  • product-id - (опционально) указывается при отправке отзыва к товару. Если не добавлен, ищет id товара на странице которого находимся.
  • from - (обязательно) указывается при отправке обратного сообщения. Email отправителя.
  • show-recaptcha - показ рекапчи для проверки.
  • submit-caption - надпись для отправления кнопки. По-умолчанию "Отправить"

Настройки полей формы:

  • type - тип поля. По-умолчанию это однострочное поле. Может принимать значения input,textarea,select,checkbox,checkbox-group,rating.
  • label - "метка" поля. Лейбл он и в Африке.
  • name - имя поля. Обязательно
  • :rules - правила заполнения поля. Принимает в себя обьект пока с одним полем requiredсо значением true\false
  • value- значение по-умолчанию

Свойства для конкретных полей

  • :options - массив значений для radio-group, checkbox-group, select. Пример: :options="[{ label: 'chose', value: '1' }, { label: 'wat', value: '2' }, { label: 'nom', value: 'wooop' }]"