Input предоставляет текстовые, числовые поля и поля пароля с форматированием, валидацией, масками и другими сценариями ввода данных.
Это специальное поле для ввода только чисел. Вы можете вводить сюда цифры, а система автоматически будет форматировать их в удобном для пользователя виде (например, добавлять разделители тысяч).
В случаях, когда разделителем тысяч является тонкий пробел, в поле ввода предусмотрена логика их замены при вставке из буфера обмена с помощью директивы kbqNormalizeWhitespace. Это поведение не установлено по умолчанию — предполагается, что при необходимости оно может быть включено вручную.
Форматирование числа зависит от выбранной вами локализации. Это означает, что одно и то же число может выглядеть по-разному в зависимости от ваших региональных настроек.
kbqNumberInput принимает границы значения и шаг, а также параметры форматирования:
min / max — диапазон, к которому значение приводится при переключении шага. По умолчанию -Infinity / Infinity. Работают и как статический атрибут (min="3"), и как привязка ([min]="3"); в обоих случаях значение приводится к числу.step — величина, добавляемая клавишами ArrowUp/ArrowDown и компонентом kbq-stepper. По умолчанию 1.bigStep — величина, добавляемая при зажатом Shift. По умолчанию 10.integer — запрещает ввод разделителя дробной части и отбрасывает дробную часть при вставке. По умолчанию false.withThousandSeparator — разделяет целую часть на группы разрядов разделителем локали. По умолчанию true.startFormattingFrom — разделение групп разрядов включается начиная с этой степени десяти: 3 разделяет 1234, а 4 — нет. По умолчанию — значение активной локали (4 для ru-RU), поэтому четырехзначное число там остается без разделителя.Директива работает в поле с type="text". Не добавляйте type="number": браузер отбраковывает отформатированное значение и очищает поле, поэтому директива принудительно сбрасывает тип в text и пишет предупреждение в консоли.
min и max также включают директивы KbqMinValidator / KbqMaxValidator из KbqInputModule: они устанавливают Validators.min / Validators.max на любой контрол с formControl, formControlName или ngModel и соответствующим атрибутом, а также переносят значение в нативные атрибуты min / max.
min, max, step и bigStep — сигналы, поэтому чтение из кода становится вызовом: numberInput.max(). Они доступны только для чтения: у input() нет .set(), поэтому меняющееся во время работы значение привязывают, а не присваивают. valueChange и disabledChange — это Subject из RxJS; подписка не изменилась, отправка значения — .next().
Разделители директива берет из активной локали, из секции input.number ее конфигурации. Переопределить их для поддерева можно через kbqInputLocaleConfigurationProvider({ number: { fractionSeparator: '.' } }) — он заменяет только переданные ключи, остальные продолжают следовать локали. Значения по умолчанию для ru-RU лежат в KBQ_INPUT_DEFAULT_LOCALE_CONFIGURATION.
kbqInputMonospace переключает kbqInput на моноширинный шрифт — удобно для идентификаторов, хешей и ключей.
Маски ввода контролируют формат и валидируют данные в реальном времени.
В примере используется библиотека Maskito:
npm install @maskito/core @maskito/angular @maskito/kit