Text Field

Однострочное текстовое поле.

Упреждающий ввод

Во вкладке Данные (Data) появился чекбокс Упреждающий ввод (Typeahead), активировав который, появляется возможность выбора способа формирования списка и текстовое поле для ввода соответствующего списка:

../../../../../_images/text_field_1.png
  • Custom - вводим код в формате:

values = ['one', ‘two’];
  • Values - инпут, в котором вводятсязначения и добавляются по Enter (используется компонент Tags):

../../../../../_images/text_field_2.png
  • Raw JSON - в текстовое поле вводим данные в формате JSON-строки:

"[\n  \"one\",\n  \"two\",\n  \"three\",\n  4,\n  5,\n  \"six\"\n]"

Для отображения ключей уже добавленных на форме компонентов, расширил базовый компонент форм, поле key. Теперь, при добавлении на форму нового компонента ( или при редактировании), в instance.root.options._webform хранится ссылка на форму, из которой можно достать список добавленных компонентов, например:

const rootFormComponents = _.get(instance, 'root.options._webform.components') || [];

values = Object.keys(utils.flattenComponents(rootFormComponents));

Для поддержки асинхронных запросов в типе источника Custom нужно переменной values присвоить промис, который должен вернуть массив строк

values = window.Citeck.Records.get('emodel/type@type').load('model.attributes[]{id}');

Теперь, при добавлении на форму нового компонента, при вводе имени свойства, появляется выпадающий список (при наличии частичного совпадения имен). Это позволит понять, какие имена уже заняты, чтобы не привести к ошибке при создании или редактировании формы.

../../../../../_images/text_field_3.png

Ввод маски

На вкладке Вид (View) можно предопределить формат ввод. Маска полезна для принудительного использования форматов ввода, таких как номера телефонов, почтовые индексы и т. д.

В поле Маска для поля (Input Mask) введите маску с использованием:

  • 9: числовой

  • a: буквенный

  • : буквенно-цифровой

Например:

../../../../../_images/text_field_4.png