Перейти к содержимому

CoreForm

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Форма целиком из конфига: поля, грид, валидации (mini-DSL) и статусы отправки задаются объектом конфига. Конфиг передаётся пропом config: развёрнутый — yaml-props-фенсом с ключом config внутри контейнера, компактный — JSON-биндингом :config='{…}' (одинарные кавычки снаружи, JSON внутри). Отправка — fetch на action.

Форма заявки

Заявка на участие

Формат участия

Что умеют поля

type — text, email, tel, url, textarea, select, checkbox, radio; правила — mini-DSL: required, email, tel, checked, minLength:N, maxLength:N, minValue:N, maxValue:N, pattern:<regexp>, oneOf:a,b. У select/radio опции — строки или [label, value]; лейаут — columns и span поля. Отдельные поля форм (input, textarea, select и т.д.) в MDC не показываются — они живут только внутри формы со состоянием.

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.
MDC
Форма целиком из конфига: поля, грид, валидации (mini-DSL) и статусы отправки задаются объектом конфига. Конфиг передаётся пропом `config`: развёрнутый — yaml-props-фенсом с ключом `config` внутри контейнера, компактный — JSON-биндингом `:config='{…}'` (одинарные кавычки снаружи, JSON внутри). Отправка — fetch на `action`.

### Форма заявки

::core-form
```yaml [props]
config:
  action: /api/apply
  title: Заявка на участие
  columns: 2
  submitLabel: Отправить
  fields:
    - name: name
      type: text
      label: Имя
      rules: [required]
    - name: email
      type: email
      label: Email
      span: 2
      rules: [required, email]
    - name: phone
      type: tel
      label: Телефон
      rules: [tel]
    - name: track
      type: select
      label: Направление
      options: [Дизайн, Фронтенд, Бэкенд]
    - name: format
      type: radio
      label: Формат участия
      options: [[Онлайн, online], [Офлайн, offline]]
    - name: message
      type: textarea
      label: О себе
      span: 2
      rules: [maxLength:300]
    - name: consent
      type: checkbox
      label: Согласен с условиями
      rules: [checked]
```
::

### Что умеют поля

`type` — text, email, tel, url, textarea, select, checkbox, radio; правила — mini-DSL: `required`, `email`, `tel`, `checked`, `minLength:N`, `maxLength:N`, `minValue:N`, `maxValue:N`, `pattern:<regexp>`, `oneOf:a,b`. У select/radio опции — строки или `[label, value]`; лейаут — `columns` и `span` поля. Отдельные поля форм (input, textarea, select и т.д.) в MDC не показываются — они живут только внутри формы со состоянием.