ngx-chips — компонент ввода тегов (tag/chips input) для фреймворка Angular, предназначенный для формирования, отображения и управления наборами меток в пользовательском интерфейсе. Он обеспечивает удобный способ добавления, удаления и редактирования коротких текстовых элементов (тегов) внутри формы, поддерживает автодополнение, ограничения по валидации и гибкую настройку внешнего поведения. Компонент ориентирован на сценарии, где требуется ввод множества отдельных сущностей, таких как ключевые слова, теги категорий или адреса электронной почты в виде «чипов».
Развитие и распространение ngx-chips связано с потребностью разработчиков Angular в готовом решении для теговых полей, которое интегрируется с реактивными формами и шаблонной валидацией. В реализации обычно присутствуют механизмы управления источниками подсказок (локальные списки или асинхронные запросы), обработка событий добавления и удаления, настройка ограничений (максимальное количество тегов, длина, шаблоны) и стилизация через встроенные классы. При недостатке точной исторической информации о происхождении проекта, его документации или авторстве, описание ограничивается общепринятыми возможностями подобных библиотек и особенностями, отмечаемыми в доступных описаниях.
- Добавление тегов: ввод текста с подтверждением клавишей (Enter, Tab и др.) или выбор из списка подсказок.
- Автодополнение: поддержка локальных и удалённых источников данных, фильтрация и подсветка совпадений.
- Удаление и редактирование: удаление через иконку или клавишу Backspace; возможность редактирования существующих чипов.
- Валидация: правила по шаблону, длине, уникальности и максимальному количеству тегов; интеграция с Angular Forms.
- Настраиваемость отображения: шаблоны для отображения чипов, кастомные классы и параметры визуального представления.
- События и API: события при добавлении/удалении, программное управление списком тегов и доступ к внутренним методам.
- Поддержка клавиатуры и доступности: навигация по чипам, работа с клавиатурой и базовые ARIA-атрибуты.
- Мобильная совместимость: адаптивное поведение ввода и корректная работа на сенсорных устройствах.
- Международность: возможность работы с различными наборами символов и языками ввода.
- Интеграция с другими компонентами: совместимость с библиотеками стилей и возможная интеграция в сложные формы и интерфейсы.