Библиотека форм для Angular | ng-hub-ui-forms

Доступные поля форм для Angular (input, textarea, slider, select, datepicker) с автоматическим выводом ошибок на уровне контрола, группы и формы, реактивными формами и CSS-переменными.

Интерактивные примеры

Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.

Текстовые поля

Поле `hub-input` с привязкой к reactive-forms и автоматическим отображением ошибок без какой-либо обвязки. Text, email, password, number и counter, а также плавающие метки и аддоны input-group.

Текстовые поля и автоошибки

We'll never share it.

Поля пароля — переключатель показа, индикатор надёжности и автозаполнение

While typing with Caps Lock on, a warning hint appears automatically under the field.

Число, счётчик, цвет, переключатель, флажок

Группы полей, файл и плавающая метка

$.00
@
No file selected
Deprecated since 22.6.0 — use <hub-file-input> instead.

Значки, кнопки и поля, присоединённые к полю

€
Pick one
From
€
a month
a week
Unassigned
Markdown

Маски шаблонов (карта, IBAN, телефон, дата)

Form value: { "card": "", "expiry": "", "iban": "", "phone": "", "date": "" }

Ввод одноразового кода (OTP)

Paste the 6-digit code we sent you.

Form value: { "code": "", "pin": "", "coupon": "" }

Поле поиска со значком и автодополнением

Debounced term (after 300 ms): —

  • Angular
  • React
  • Vue
  • Svelte
  • Solid
  • Qwik
  • Preact
  • Lit

Многострочный ввод и диапазон

Автоматически растущие textarea со счётчиками символов и слайдеры диапазона с одним / двумя ползунками.

Текстовая область со счётчиком и авторазмером

0 / 160
Grows as you type.

Slider и диапазон с двумя ползунками

Dual-thumb range.

Оформление слайдера (градиент и flush)

Выбор

Форкнутый движок ng-select, темизированный с помощью hub-токенов, а также форматы button, radio и checkbox, отображающие собственный UI для одного и того же значения.

Сегментированный элемент управления

Single-select — the selected pill slides between options.
Multiple-select — the value is an array.

view: list · perks: wifi

Segmented: свой шаблон опции

Single-select — the template renders an icon, the label and a check on the selected segment.
Multiple-select — the same template contract; index comes from the context.

transport: bike · channels: email

Выбор и множественный выбор

Select a country
Pick some tags
Angular
Signals

Сгруппированные варианты

Select a city

Поиск по вводу

Type to filter…
Search and add…

Select: асинхронный typeahead

Type at least 2 characters…
Async typeahead — each term is pushed to the Subject and the results come back from the 'server'.
Pick or type a new tag…
addTag creates an item from the search term when nothing matches.

city: — · tags: —

Свои шаблоны опции и метки

Pick a teammate

Форматы кнопок, радио и флажков

Select внутри модального окна

Аддоны и прикреплённые действия

€
Pick a tier
/ month
Static addons at both ends, like an input group.
https://api.
Pick a region
A run of addons on one side reads as a single piece.
Pick a product
An action attached to the edge — it acts on whatever is selected.
Pick a plan
EUR
Addon and action together — the action is always the outermost.

Выбор даты

Выбор даты / диапазона с нуля на основе нативного Date + CDK Overlay, с границами, навигацией с клавиатуры и полным i18n.

Выбор времени — время суток

Required.
Between 08:00 and 22:00, in quarters.
Fed '09:30:00' — the seconds are trimmed instead of showing nothing.
FromUTC
Emitted value{ "opensAt": null, "closesAt": "09:00", "fromApi": "09:30:00", "shiftFrom": "09:00", "shiftTo": "18:00" } opensAt is required

Datepicker и диапазон

No future dates.
Pick a start, then sweep to preview.

Выбор даты со временем

Each end carries its own time.
A single instant, minute precision.
Emitted value{ "window": null, "reminder": null }

Гранулярность: от года до секунды

 2026
2026-09
2026-09-01
2026-09-01T09:00:00+02:00
2026-09-01T09:30:00+02:00
2026-09-01T09:30:45+02:00

Форматы ввода, значения и отображения

—
—
Anything the enum does not cover — here, Unix seconds.
—
An Angular date pattern. The stored value is unaffected.
—
Seeded with '15/06/2026', which no built-in rule would read.
string — 15/06/2026

День с диапазоном времени

One day, two times — never crosses midnight.
Two instants — the ends may fall on different days.
Emitted value{ "meeting": null, "stay": null } meeting spans — · stay spans —

Загрузка файлов

Поле выбора файлов с перетаскиванием, вставкой из буфера обмена, ограничениями по типу и размеру, предпросмотром и необязательным прогрессом загрузки для каждого файла.

Один файл и валидация

Drag the file onto the box, paste it, or browse for it.

Selected: —

Перетаскивание, ограничения и предпросмотр

Прогресс загрузки, отмена и повтор

Uploads start automatically. Rename a file to include “fail” to see the retry button.

Контейнеры и валидация

`form[hubForm]`, `hub-fieldset` и `hub-legend` автоматически отображают ошибки на уровне группы и формы (между полями) — так же, как поля отображают ошибки контролов.

Контейнеры и межполевые ошибки

Password

Справа налево

Каждое поле зеркалится при `dir="rtl"`. Большая часть достаётся бесплатно — примитивы написаны на логических свойствах CSS, — но слайдеру, переключателю и сегментированному контролу потребовалась отдельная обработка, потому что их геометрия лишь наполовину описана в CSS.

Справа налево — все поля зеркально

Barcelona
The calendar button changes side.