Ввод реквизитов документов (DocInput)

Скопировать прямую ссылку на статью

Общая информация

Компонент DocInput представляет собой набор полей, предназначенных для ввода реквизитов документов

Поддерживаемые экраны

Компонент может быть задействован на экране типа:

Внешний вид компонента

В услуге

Рисунок1.png

В конструкторе

Рисунок2.png

Структура компонента DocInput

ВКУ		JSON
№	В конструкторе	Атрибут	Тип	Описание
1	Идентификатор компонента	id	string	Уникальный идентификатор компонента в JSON
2	Имя компонента	name	string	Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент
3	Заголовок компонента	label	string	Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле
4	Отображение компонента в повторяющихся блоках RepeatableFields	onlyFirstScreen	boolean	Можно выбрать отображение только в первом блоке или наоборот. Если оставить выпадающий список пустым, то компонент DocInput будет отображаться во всех блоках компонента RepeatableFields
5	Не верифицировать документ в ЕСИА	ignoreVerification	boolean	Отключает подтверждение введённых данных в ЕСИА
6	Тип документа, по которому проверять данные из ЕСИА	type	string	Атрибут, позволяющий задать тип документа, по которому будут проверяться данные из ЕСИА
7	Условие сравнения с заданной датой	condition	string	Предназначен для установления ограничений, не позволяющих выбрать дату вне заданного периода
8	Ссылка/Постоянная величина	type	string	Атрибуты, позволяющие указать ограничение в вводе даты. type может принимать одно из двух значений: const — постоянная величина, например, today ref — ссылка на другой компонент dateInput услуги
9	Значение	value	string	Граничное значение, ограничивающее выбор даты
10	Ключ	additionalPropertiesKey	ngSelect	Позволяет выбрать поля для заполнения пользователем – «Серия», «Номер», «Дата выдачи», «Действителен до (только для загранпаспорта)», «Кем выдано», «Код подразделения (только для паспорта РФ)»
11	Тип данных	type	string	Позволяет выбрать тип вводимых данных
12	Название поля на экране	label	string	Название поля, указывающее что пользователю нужно в него ввести
13	Подсказка для поля	hint	string	Текст, который отображается под полем
14	Поле обязательно для заполнения	required	boolean, string	Принуждает пользователя к взаимодействию с полем
15	Идентификатор подсказки suggest	suggestionId	string	Механизм отображения пользователю набора подходящих для ввода данных и автоматическое заполнение полей формы этими данными
16	Маска ввода	mask	array	Позволяет настроить маску ввода для поля
17	Скрыть поле	hidden	boolean	Если чекбокс установлен, то поле не отображается на экране. Для корректной работы скрытого поля необходимо настроить необязательность для заполнения и удалить правила валидации
18	Тип валидации	Validation	object	Позволяет выбрать один из типов валидации: – регулярное выражение – валидация ручного ввода при заданных ограничениях – минимальная дата – максимальная дата
19	Приведение букв к верхнему регистру	fstuc	string	Позволяет автоматически делать заглавной первую букву в первом слове или первую букву в каждом слове, а также делать все буквы заглавными
20	Настройка формирования health-метрик	healthList	array	Позволяет задать список событий для поля, по которым будут формироваться health-запросы
21	Зависимости с ранее введёнными данными	ref	array	Массив объектов, в элементах которых описываются зависимости и правила отображения поля
22	Идентификатор подсказки suggest	suggestionId	string	Механизм отображения пользователю набора подходящих для ввода данных и автоматическое заполнение полей формы этими данными
23	Вычисляемые аргументы компонента (linkedValues)	linkedValues	array	Атрибуты компонента, позволяющие реализовать сложный функционал
24	Компоненты, для которых чистить кэш	clearCacheForComponentIds	array	При переходе на следующий экран cachedValues всех указанных компонентов будут удалены независимо от того, были ли изменены данные в компоненте

Пример JSON структуры компонента передаваемой в DTO

{

"visited ": true,

"value":"{

"series":"1111",

"number":"222222",

"date":"2024-12-03T00:00:00.000+03:00",

"emitter":"МВД России",

"issueId":"333-333"

}

Варианты использования

Компонент DocInput чаще всего используется для ввода паспортных данных получателя услуги в сценарии представительства

Рисунок3.png

Кроме того, распространён вариант использования компонента на экране сбора данных о реквизитах свидетельства о рождении

Рисунок4.png

Пример реализации экранов с использованием компонента DocInput можно посмотреть в шаблоне Представительства с детьми

, чтобы оставить комментарий к статье