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

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

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

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

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

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

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

• Клик по тегу при зажатом 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 либо форма была отправлена.

Клавиша	Действие
Backspace / ← / Shift + Tab	Переместить фокус на последний тег.
Ctrl + A	Выделить все теги и поставить фокус на последний из них.

Клавиша	Действие
← / →	Переместить фокус на предыдущий/следующий тег.
Shift + ← / →	Изменить диапазон и переместить фокус.
Space	Выбрать/снять выбор тега.
Delete / Backspace	Удалить тег.
F2 / Enter	Начать редактирование.
Ctrl + A	Выделить все теги.
Home / End	Переместить фокус на первый/последний тег.

Клавиша	Действие
Enter	Сохранить изменения.
Esc	Отменить изменения.