Angular Formular-Bibliothek | ng-hub-ui-forms

Barrierefreie Angular-Formularfelder (Input, Textarea, Slider, Select, Datepicker) mit automatischer Anzeige von Fehlern auf Control-, Gruppen- und Formularebene, Reactive Forms und CSS-Variablen.

Übersicht

Warum Teams nach dieser Bibliothek suchen

Nutze diese Angular-Formular-Bibliothek, wenn du barrierefreie Formularfelder mit automatischer Anzeige von Validierungsfehlern, einen geforkten ng-select, einen von Grund auf neu entwickelten Datepicker und ein Runtime-Theming über CSS-Variablen benötigst — ganz ohne Bootstrap.

Installieren

npm install ng-hub-ui-forms

Springen zu

Ideal für

  • Registrierungs- und Checkout-Formulare
  • Einstellungsseiten
  • Filter und Suche
  • Admin-Dashboards

Über forms

ng-hub-ui-forms vereint jedes Formularfeld unter einem einzigen Vertrag: Binde es mit Reactive Forms und die passenden Fehler erscheinen automatisch auf Control-, Gruppen- und Formularebene. Die Felder sind standalone, OnPush und nativ auf Signals aufgebaut; der Select ist ein gepflegter Fork von ng-select, mit Hub-Tokens gestaltet; der Datepicker basiert auf nativem Date und dem Angular CDK Overlay. Alles wird über kanonische --hub-* CSS-Variablen gestaltet, inklusive Dark Mode zur Laufzeit.

Funktionsleitfäden

Textfelder

Das `hub-input`-Feld mit Reactive-Forms-Bindung und automatischer Fehleranzeige ohne Verdrahtung. Text, E-Mail, Passwort, Zahl und Counter sowie Floating Labels und Input-Group-Addons.

Beispiele:
Textfelder & automatische Fehler

Textfelder & automatische Fehler

We'll never share it.
Zahl, Zähler, Farbe, Schalter, Kontrollkästchen

Zahl, Zähler, Farbe, Schalter, Kontrollkästchen

Eingabegruppen, Datei & schwebendes Label

Eingabegruppen, Datei & schwebendes Label

$.00
@
No file selected
Mustermasken (Karte, IBAN, Telefon, Datum)

Mustermasken (Karte, IBAN, Telefon, Datum)

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

OTP-Eingabe (Einmalcode)

OTP-Eingabe (Einmalcode)

Paste the 6-digit code we sent you.

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

Mehrzeilig & Bereich

Automatisch wachsende Textareas mit Zeichenzählern sowie Range-Slider mit einem oder zwei Reglern.

Beispiele:
Textbereich mit Zähler & automatischer Größenanpassung

Textbereich mit Zähler & automatischer Größenanpassung

0 / 160
Grows as you type.
Slider & Bereich mit zwei Reglern

Slider & Bereich mit zwei Reglern

Dual-thumb range.

Auswahl

Die geforkte ng-select-Engine, gestaltet mit hub-Tokens, sowie die Button-, Radio- und Checkbox-Formate, die ihre eigene UI für denselben Wert rendern.

Beispiele:
Auswahl & Mehrfachauswahl

Auswahl & Mehrfachauswahl

Select a country
Pick some tags
Gruppierte Optionen

Gruppierte Optionen

Select a city
Typeahead & Suche

Typeahead & Suche

Type to filter…
Search and add…
Eigene Options- und Label-Templates

Eigene Options- und Label-Templates

Pick a teammate
Schaltflächen-, Radio- & Kontrollkästchenformate

Schaltflächen-, Radio- & Kontrollkästchenformate

Datumsauswahl

Eine von Grund auf neu entwickelte Datums-/Bereichsauswahl auf nativem Date + CDK Overlay, mit Grenzen, Tastaturnavigation und vollständigem i18n.

Beispiele:
Datepicker & Bereich

Datepicker & Bereich

No future dates.
Date range.

Container & Validierung

`form[hubForm]`, `hub-fieldset` und `hub-legend` zeigen Fehler auf Gruppen- und Formularebene (feldübergreifend) automatisch an — so wie Felder Control-Fehler anzeigen.

Beispiele:
Container & feldübergreifende Fehler

Container & feldübergreifende Fehler

Password

Hauptfunktionen

Letzte Änderungen

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.

Verwandte Bibliotheken

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