Form

Отображает html-форму

Содержит поля ввода и элементы выбора. Позволяет валидировать данные перед отправкой на сервер.

<Form OnSubmit={()=>{/* здесь мы проверяем и отправляем данные*/}}>
    <Input 
        Mode='Text'
        Tooltip='Input'
        Text='Input text...'
        Label='Input'
        Model-var='Form.Input'
    />
    <RadioButton
        Label="foo"
        Model-var="foo"
        State={[
          {
            key: 1,
            title: '1',
            value: 'Шла',
          },
          {
            key: 2,
            title: '2',
            value: 'Маша',
          }
        ]}
        TitleField="value"
        KeyField="key"
        ValueField="value"
        CSS={['mb-8']}
  />
</Form>

Свойства

Имя	Описание	Тип	Значение по умолчанию
AutoMargin	Размер отступа в пикселях для добавленных на форму компонентов	number	0
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
CSS	Массив строк-классов CSS-стилей компонента	array
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
FormChanged	Признак изменения компонентов на форме	boolean	False
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
OnChange	Обработчик события об изменении содержимого формы	undefined
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnSubmit	Обработчик события об отправке данных, введенных на форме, в модель данных	undefined
OnUnmount	Обработчик события Unmount	undefined
OutputState	Объект, описывающий переменные состояния формы. Используется для связывания формы, элементов управления, размещенных на форме, и кнопки типа Отправить (Submit). В это свойство записывается следующая информация: признак попытки отправки формы — true или false; признак допустимости состояний каждого элемента управления, размещенного на форме. Примером формы является форма входа Login.jsx.	object
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
Touched	Признак совершенной попытки отправки формы	boolean	False
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

Данные:

  
    "dataForSelect" : [
        {
          "id": 1,
          "name": "first option"
        },
        {
          "id": 2,
          "name": "second option"
        },
      ]

}

JSX:

<Form
  Touched-var='TestFormTouched'
  OnSubmit={() => {
    if(validate(getValue('TestForm'))) {
      return null;
    }
  }}
>
  <Input
    Mode='Text'
    Tooltip='Инпут'
    Text='Введите что-нибудь...'
    Error={(input = Form.Input) => {
      return !!input && input.length > 5;
    }}
    Label='Инпут'
    Value-var='Form.Input'
    OutputValue-var='Form.Input'
    OutputState-var='TestForm.Input'
    HighlightError-var='TestFormTouched'
  />
  <Select
    Label="Селект"
    Error={(input = Form.Select) => {
      return !!input;
    }}
    HasClearButton={true}
    Label='Селект'
    State-var='dataForSelect'
    KeyMap={{Value: 'id', DisplayValue: 'name'}}
    Value-var='Form.Select'
    OutputValue-var='Form.Select'
    OutputState-var='TestForm.Select'
    HighlightError-var='TestFormTouched'
    KeyField="name"
    ValueField="id"
  />
  </Form>
    

Свойства​

Примеры​

Свойства

Примеры