Librería de Formularios para Angular | ng-hub-ui-forms

Campos de formulario accesibles para Angular (input, textarea, slider, select, datepicker) con visualización automática de errores de control/grupo/form, formularios reactivos y variables CSS.

Visión General

Por qué los equipos buscan esta librería

Utiliza esta librería de formularios para Angular cuando necesites campos accesibles con visualización automática de errores, un ng-select forkeado, un datepicker reconstruido y theming runtime con variables CSS, sin Bootstrap.

Instalación

npm install ng-hub-ui-forms

Ir a

Ideal para

  • formularios de registro y checkout
  • páginas de ajustes
  • filtros y búsqueda
  • dashboards de administración

Sobre forms

ng-hub-ui-forms unifica cada campo bajo un único contrato: bíndalo con formularios reactivos y los errores aparecen automáticamente a nivel de control, grupo y formulario. Los campos son standalone, OnPush y signal-native; el select es un fork mantenido de ng-select tematizado con tokens hub; el datepicker está construido sobre Date nativo y el overlay del CDK de Angular. Todo se tematiza con variables CSS canónicas --hub-*, con dark mode en runtime.

Guías de uso

Campos de texto

El campo `hub-input` con vinculación a reactive forms y visualización de errores automática y sin cableado. Texto, email, contraseña, número y contador, además de etiquetas flotantes y addons de input-group.

Ejemplos:
Campos de texto y errores automáticos

Campos de texto y errores automáticos

We'll never share it.
Número, contador, color, interruptor, casilla

Número, contador, color, interruptor, casilla

Grupos de entrada, archivo y etiqueta flotante

Grupos de entrada, archivo y etiqueta flotante

$.00
@
No file selected
Máscaras de patrón (tarjeta, IBAN, teléfono, fecha)

Máscaras de patrón (tarjeta, IBAN, teléfono, fecha)

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

Entrada de código de un solo uso (OTP)

Entrada de código de un solo uso (OTP)

Paste the 6-digit code we sent you.

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

Multilínea y rango

Textareas que crecen automáticamente con contadores de caracteres, y sliders de rango de un solo control o de doble control.

Ejemplos:
Área de texto con contador y autoajuste

Área de texto con contador y autoajuste

0 / 160
Grows as you type.
Slider y rango de doble control

Slider y rango de doble control

Dual-thumb range.

Selección

El motor ng-select bifurcado y tematizado con los tokens de hub, además de los formatos button, radio y checkbox que renderizan su propia UI para el mismo valor.

Ejemplos:
Selección y selección múltiple

Selección y selección múltiple

Select a country
Pick some tags
Opciones agrupadas

Opciones agrupadas

Select a city
Typeahead y búsqueda

Typeahead y búsqueda

Type to filter…
Search and add…
Plantillas de opción y etiqueta

Plantillas de opción y etiqueta

Pick a teammate
Botones, radio y formatos de casilla

Botones, radio y formatos de casilla

Selección de fechas

Un selector de fecha o rango construido desde cero sobre Date nativo + CDK Overlay, con límites, navegación por teclado e i18n completa.

Ejemplos:
Datepicker y rango

Datepicker y rango

No future dates.
Date range.

Contenedores y validación

`form[hubForm]`, `hub-fieldset` y `hub-legend` muestran automáticamente los errores a nivel de grupo y de formulario (entre campos), del mismo modo que los campos muestran los errores de control.

Ejemplos:
Contenedores y errores entre campos

Contenedores y errores entre campos

Password

Características clave

Cambios recientes

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.

Librerías relacionadas

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