Bibliothèque de Formulaires Angular | ng-hub-ui-forms

Champs de formulaire Angular accessibles (input, textarea, slider, select, datepicker) avec affichage automatique des erreurs de contrôle/groupe/formulaire, formulaires réactifs et variables CSS.

Vue d’ensemble

Pourquoi les équipes recherchent cette bibliothèque

Utilisez cette bibliothèque de formulaires Angular lorsque vous avez besoin de champs accessibles avec affichage automatique des erreurs de validation, d'un ng-select forké, d'un datepicker reconstruit et d'un theming runtime via variables CSS — sans Bootstrap.

Installation

npm install ng-hub-ui-forms

Aller à

Idéal pour

  • formulaires d'inscription et de paiement
  • pages de paramètres
  • filtres et recherche
  • tableaux de bord d'administration

À propos de forms

ng-hub-ui-forms unifie chaque champ de formulaire derrière un seul contrat : liez-le avec les formulaires réactifs et les erreurs correspondantes apparaissent automatiquement au niveau du contrôle, du groupe et du formulaire. Les champs sont standalone, OnPush et signal-native ; le select est un fork maintenu de ng-select thématisé avec les tokens hub ; le datepicker est construit sur Date natif et l'overlay du CDK Angular. Tout est thématisé via des variables CSS canoniques --hub-*, avec un mode sombre en runtime.

Guides de fonctionnalités

Champs de texte

Le champ `hub-input` avec liaison aux reactive forms et affichage automatique des erreurs sans câblage. Text, email, password, number et counter, plus les libellés flottants et les addons input-group.

Exemples:
Champs de texte et erreurs automatiques

Champs de texte et erreurs automatiques

We'll never share it.
Nombre, compteur, couleur, interrupteur, case à cocher

Nombre, compteur, couleur, interrupteur, case à cocher

Groupes de champs, fichier et libellé flottant

Groupes de champs, fichier et libellé flottant

$.00
@
No file selected
Masques de saisie (carte, IBAN, téléphone, date)

Masques de saisie (carte, IBAN, téléphone, date)

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

Saisie de code à usage unique (OTP)

Saisie de code à usage unique (OTP)

Paste the 6-digit code we sent you.

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

Multiligne et plage

Zones de texte à croissance automatique avec compteurs de caractères, et curseurs de plage à une ou deux poignées.

Exemples:
Zone de texte avec compteur et redimensionnement automatique

Zone de texte avec compteur et redimensionnement automatique

0 / 160
Grows as you type.
Slider et plage à double curseur

Slider et plage à double curseur

Dual-thumb range.

Sélection

Le moteur ng-select forké thématisé avec les tokens hub, ainsi que les formats button, radio et checkbox qui affichent leur propre interface pour la même valeur.

Exemples:
Sélection et sélection multiple

Sélection et sélection multiple

Select a country
Pick some tags
Options groupées

Options groupées

Select a city
Typeahead et recherche

Typeahead et recherche

Type to filter…
Search and add…
Modèles d’option et d’étiquette

Modèles d’option et d’étiquette

Pick a teammate
Boutons, formats radio et case à cocher

Boutons, formats radio et case à cocher

Sélection de date

Un sélecteur de date / plage conçu de zéro sur Date natif + CDK Overlay, avec limites, navigation au clavier et i18n complète.

Exemples:
Datepicker et plage

Datepicker et plage

No future dates.
Date range.

Conteneurs et validation

`form[hubForm]`, `hub-fieldset` et `hub-legend` font ressortir automatiquement les erreurs au niveau du groupe et du formulaire (inter-champs) — de la même manière que les champs font ressortir les erreurs de contrôle.

Exemples:
Conteneurs et erreurs inter-champs

Conteneurs et erreurs inter-champs

Password

Fonctionnalités clés

Changements récents

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.

Bibliothèques associées

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