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

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

Обзор

Почему команды ищут эту библиотеку

Используйте эту библиотеку форм для Angular, когда нужны доступные поля с автоматическим выводом ошибок валидации, форкнутый ng-select, написанный с нуля datepicker и тематизация через CSS-переменные в рантайме — без Bootstrap.

Установка

npm install ng-hub-ui-forms

Перейти к

Идеально для

  • формы регистрации и оформления заказа
  • страницы настроек
  • фильтры и поиск
  • админ-панели

О библиотеке forms

ng-hub-ui-forms объединяет все поля формы под единым контрактом: привяжите их к реактивным формам, и соответствующие ошибки появляются автоматически на уровне контрола, группы и формы. Поля являются standalone, OnPush и нативно работают с Signals; select — это поддерживаемый форк ng-select, оформленный токенами hub; datepicker построен на нативном Date и overlay из Angular CDK. Всё тематизируется через канонические CSS-переменные --hub-*, с тёмной темой в рантайме.

Руководства по возможностям

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

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

Примеры:
Текстовые поля и автоошибки

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

We'll never share it.
Число, счётчик, цвет, переключатель, флажок

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

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

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

$.00
@
No file selected
Маски шаблонов (карта, IBAN, телефон, дата)

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

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

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

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

Paste the 6-digit code we sent you.

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

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

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

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

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

0 / 160
Grows as you type.
Slider и диапазон с двумя ползунками

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

Dual-thumb range.

Выбор

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

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

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

Select a country
Pick some tags
Сгруппированные варианты

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

Select a city
Поиск по вводу

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

Type to filter…
Search and add…
Свои шаблоны опции и метки

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

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

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

Выбор даты

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

Примеры:
Datepicker и диапазон

Datepicker и диапазон

No future dates.
Date range.

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

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

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

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

Password

Ключевые возможности

Последние изменения

Version 21.0.0 - 6/13/26, 12:00 AM

added: Initial release: hub-input (10 formats), hub-textarea, hub-slider (single + range), hub-select (dropdown + buttons/radio/checkbox), hub-datepicker (single + range), hub-form/hub-fieldset/hub-legend containers.

added: Automatic validation-error display at control, group and form level, with provideHubForms() configuration.

Связанные библиотеки

ng-hub-ui-utils ng-hub-ui-modal ng-hub-ui-calendar