Tag Input позволяет вводить несколько значений в виде тегов и поддерживает навигацию с клавиатуры, выбор и удаление.

Удаление тегов

Порядок удаления тегов:

• Если есть выделенные теги, будут удалены они все.
• Если выделенных тегов нет, будет удалён тег в фокусе.

Теги можно удалить несколькими способами:

• Клик по иконке удаления (директива kbqTagRemove) внутри тега.
• Нажатие клавиши Delete или Backspace.
• Клик по кнопке сброса — она удаляет все теги, кроме неактивных.
• Программное удаление через API компонента.

Опция удаления настраивается при помощи атрибута removable (по умолчанию включена). У неактивного тега иконка удаления не показывается, а у списка с removable="false" нет и кнопки сброса.

Кнопке сброса собственный обработчик не нужен: она удаляет теги через то же событие removed, что и иконка удаления внутри тега. Какие теги она удаляет, задаёт параметр clearPredicate: с [clearPredicate]="clearEverything" и clearEverything = () => true очищаются и неактивные.

Выбор тегов

Теги можно выбрать несколькими способами:

• Клик по тегу при зажатом Ctrl.
• Клик по тегу при зажатом Shift, чтобы изменить выбор диапазона от якорного тега до нажатого.
• Нажатие Shift + ← / →, чтобы расширить или сузить диапазон.
• Нажатие комбинации клавиш Ctrl+A.
• Space при фокусе на теге.
• Программный выбор через API компонента.

Мышь и клавиатура изменяют один диапазон относительно его начального тега. При сужении диапазона выбор лишних тегов снимается. Недоступные теги не изменяются.

Опция выбора настраивается при помощи атрибута selectable (по умолчанию включена).

Редактирование

Для включения режима редактирования необходимо установить свойство editable для kbq-tag-list или отдельного kbq-tag.

Вход в режим:

• При двойном клике по тегу.
• При нажатии клавиши Enter или F2 (при фокусе на теге).

Сохранение изменений:

• При нажатии клавиши Enter.
• При нажатии на кнопку подтверждения (директива kbqTagEditSubmit).

Отмена изменений:

• При нажатии клавиши Escape.
• При потере фокуса.

В режиме редактирования тег превращается в поле ввода и остается на той же позиции внутри контрола.

Перестановка и сортировка

Для включения возможности перестановки тегов необходимо установить свойство draggable для kbq-tag-list.

Разделители

По умолчанию тег создаётся по Enter. Дополнительные клавиши-разделители задаются через kbqTagInputSeparatorKeyCodes и работают как при наборе текста, так и при вставке из буфера обмена.

Если разделитель нужен только при вставке (например, пробел — обычный символ внутри тега), укажите для него appliesTo: ['paste']. Разделители без key (например, /\s+/ для любой последовательности пробельных символов) вставочные по умолчанию, так как им не может соответствовать нажатие клавиши.

Настройки по умолчанию для приложения или модуля задаются через kbqTagsDefaultOptionsProvider:

import { ENTER } from '@koobiq/components/core';
import { kbqTagsDefaultOptionsProvider } from '@koobiq/components/tags';
 
@NgModule({
    providers: [
        kbqTagsDefaultOptionsProvider({
            separatorKeyCodes: [ENTER],
            separators: [
                { symbol: /\r?\n/, key: 'Enter', keyCode: ENTER, appliesTo: ['input', 'paste'] },
                { symbol: /\s+/, appliesTo: ['paste'] } // только при вставке — разделяет по любым пробельным символам
            ]
        })
    ]
})

Валидация

Валидаторы вешаются на <kbq-tag-list>: контрол формы для всего списка — это именно kbq-tag-list, а поле ввода служит только для набора текста. Значение контрола — массив тегов, так что одним набором валидаторов проверяются и количество тегов, и содержимое каждого из них.

Собственный [formControl] или [ngModel] на <input kbqTagInputFor> при этом не запрещён: он нужен, например, когда набранный текст участвует в фильтрации автодополнения. Библиотека просто не учитывает валидаторы, навешанные на этот контрол — не проверяет их и в состояние ошибки поле не переводит.

Валидаторы не запрещают добавить тег: тег добавляется, а поле переходит в состояние ошибки — одинаково при вводе с клавиатуры и при вставке из буфера обмена. Если некорректное значение не должно попадать в список, отфильтруйте его в обработчике (kbqTagInputTokenEnd). Правка тега на месте идёт мимо этого обработчика — там значение отклоняется через preventEditSubmit.

Момент показа ошибки задаётся через ErrorStateMatcher и по умолчанию наступает, когда контрол невалиден и при этом получил touched либо форма была отправлена.

Навигация с клавиатуры

Фокус в пустой области ввода

Фокус на теге

Режим редактирования тега