API-Referenz

Hier ist der vollständige Vertrag für forms: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle forms mit 107 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`formControlName / [formControl]`	`string \| FormControl`	—	Bindet ein beliebiges Feld an ein reaktives Steuerelement. Fehler werden automatisch angezeigt, wenn das Steuerelement berührt und ungültig ist.
`label`	`string`	`''`	Beschriftungstext des Feldes.
`labelType (hub-input, hub-select, hub-datepicker)`	`'stacked' \| 'floating' \| 'horizontal' \| 'visually-hidden'`	`'stacked'`	Platzierung der Beschriftung. `floating` legt die Beschriftung in das Steuerelement, wo sie den Platzhalter vertritt, bis das Feld den Fokus erhält oder einen Wert enthält.
`labelType (hub-textarea, hub-otp-input, hub-slider, hub-segmented, hub-timepicker)`	`'stacked' \| 'horizontal' \| 'visually-hidden'`	`'stacked'`	Platzierung der Beschriftung. Diese Felder haben keine `floating`-Variante: Wird `floating` übergeben, rendern sie eine gestapelte Beschriftung.
`labelType (hub-file-input)`	`'stacked' \| 'visually-hidden'`	`'stacked'`	Platzierung der Beschriftung. Diese Felder haben keine `floating`-Variante: Wird `floating` übergeben, rendern sie eine gestapelte Beschriftung.
`placeholder (hub-input, hub-select, hub-textarea, hub-datepicker)`	`string`	`'' / NgSelectConfig.placeholder (hub-select)`	Platzhaltertext.
`formText`	`string`	—	Hilfetext, der unter dem Steuerelement angezeigt wird.
`type (hub-input) — file is deprecated`	`'text' \| 'number' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'color' \| 'checkbox' \| 'switch' \| 'counter' \| 'file'`	`'text'`	Das hub-input-Format.
`passwordRevealed (hub-input)`	`boolean`	`false`	Bidirektionaler Sichtbarkeitsstatus eines Passwortfelds. Ein Klick auf die Augen-Schaltfläche aktualisiert ihn; das Setzen zeigt den Wert an oder verbirgt ihn.
`passwordToggle (hub-input)`	`boolean`	`true`	Gibt an, ob die integrierte Anzeige/Verbergen-Schaltfläche bei Passwortfeldern gerendert wird.
`hideOnBlur (hub-input)`	`boolean`	`true`	Gibt an, ob ein angezeigtes Passwort automatisch wieder verborgen wird, sobald das Feld den Fokus verliert.
`capsLockWarning (hub-input)`	`boolean`	`true`	Gibt an, ob unter dem Feld ein Hinweis angezeigt wird, solange die Feststelltaste aktiv ist.
`passwordStrength (hub-input)`	`boolean`	`false`	Zeigt eine optionale 4-Segment-Stärkeanzeige unter dem Feld. Die Bewertung ist über provideHubForms überschreibbar.
`autocomplete (hub-input)`	`string`	`''`	Natives autocomplete-Attribut, z. B. current-password oder new-password für Passwortmanager.
`clearable (hub-input)`	`boolean`	`false`	Wenn true, erscheint ein internes ✕, sobald das Feld einen Wert hat; es leert das Control und sendet einen leeren Suchbegriff.
`indeterminate (hub-input)`	`boolean`	`false`	Wenn true, zeigt eine Checkbox den gemischten Zustand — die ehrliche Antwort für ein „Alle auswählen“ über eine teilweise ausgewählte Liste. Zweiwege: ein Klick löst ihn auf. Vom switch-Format ignoriert.
`debounceTime (hub-input)`	`number`	`0`	Entprellung in Millisekunden, bevor das search-Ereignis ausgelöst wird (0 = bei jedem Tastendruck).
`mask (hub-input)`	`string`	—	Mustermaske für Textformate. Tokens: 0 = Ziffer, A = Buchstabe, * = alphanumerisch; andere Zeichen sind literale Trennzeichen. Z. B. "0000 0000 0000 0000".
`unmaskValue (hub-input)`	`boolean`	`false`	Speichert bei gesetzter Maske die rohen eingegebenen Zeichen (ohne Trennzeichen) im Formular anstelle des formatierten Textes.
`swatches (hub-input type="color")`	`ReadonlyArray<string \| HubColorSwatch> \| null`	`null`	Farben, die type="color" als Raster von Farbfeldern anbietet: CSS-Farbzeichenketten oder { value, label }. null übernimmt die Palette aus provideHubForms({ color }) oder, wenn keine gesetzt ist, das klassische Hex-Feld; [] erzwingt das klassische Feld. HUB_COLOR_PALETTES enthält fünf fertige Listen.
`allowCustomColor (hub-input type="color")`	`boolean`	`true`	Ob das Raster mit einer Zelle endet, die den nativen Farbwähler für eine Farbe außerhalb der Liste öffnet. Für eine geschlossene Palette ausschalten.
`customColorLabel (hub-input type="color")`	`string`	`'' / HubFormsConfig.color.customColorLabel`	Barrierefreier Name der Zelle für eine freie Farbe. Leer gilt color.customColorLabel aus der globalen Konfiguration.
`range (hub-slider)`	`boolean`	`false`	Bereichsregler mit zwei Reglern; der Wert wird zu einem [lower, upper]-Tupel.
`options (hub-segmented)`	`HubSegmentedOption[]`	`[]`	Die auswählbaren Optionen für hub-segmented in Renderreihenfolge — jeweils { value, label, disabled? }.
`size (hub-segmented)`	`'sm' \| 'md' \| 'lg'`	`'md'`	Visuelle Dichte des Segmented Control: 'sm', 'md' (Standard) oder 'lg'.
`disabled (all fields)`	`boolean (two-way, model)`	`false`	Deaktiviert das Feld. Wird von jedem Feld aus der gemeinsamen Basis geerbt und ist bidirektional — ein Feld, das über sein reaktives Steuerelement deaktiviert wird, meldet die Änderung zurück. Bei `hub-segmented` können sich zudem einzelne Optionen über `option.disabled` abmelden.
`multiple (hub-segmented)`	`boolean`	`false`	Mehrfachauswahl erlauben; der Wert wird ein Array und die Optionen schalten um (aria-pressed).
`vertical (hub-segmented)`	`boolean`	`false`	Stapelt die Segmente vertikal statt in einer horizontalen Reihe.
`vertical (hub-select) — deprecated`	`boolean`	`false`	Veraltet und an die veralteten Nicht-dropdown-Formate gebunden: ordnet die buttons-/checkbox-/radio-Optionen vertikal an. Verwenden Sie `<hub-segmented [vertical]="true">`.
`color (hub-segmented)`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral' \| string`	`''`	Semantischer Akzent des ausgewählten Segments (primary, success, …) oder eine beliebige Farbe; gleitet im Single-Modus.
`value (hub-segmented)`	`unknown \| unknown[]`	`undefined`	Two-Way-bindbarer ausgewählter Wert (model()): der Wert der gewählten Option im Single-Modus, ein Array ausgewählter Werte im Multiple-Modus. Gibt valueChange aus; üblicherweise stattdessen über formControlName gesteuert.
`format (hub-select) — deprecated for buttons/checkbox/radio`	`'dropdown' \| 'buttons' \| 'checkbox' \| 'radio'`	`'dropdown'`	Wie das Select denselben Wert rendert.
`prepend / append (hub-input, hub-select, hub-textarea, hub-datepicker, hub-timepicker)`	`string \| string[]`	`''`	Statische Gruppen-Addons an jedem Feld, das als Box dargestellt wird: Eine Zeichenkette ist ein Addon, ein Array eine Reihe davon, und leere Einträge werden verworfen statt als leere Box gezeichnet. Das Addon teilt sich den Rahmen des Feldes und ist nicht fokussierbar — für ein interaktives Steuerelement am Rand verwenden Sie stattdessen die Templates [hubPrepend] / [hubAppend]. Beide können vorhanden sein, und der projizierte Inhalt ist immer das äußerste Element auf seiner Seite.
`items / bindLabel / bindValue / multiple (hub-select)`	`any[] / string / string / boolean`	—	Optionen, die label/value-Eigenschaftsnamen für Objektelemente und Mehrfachauswahl.
`groupBy (hub-select)`	`string \| undefined`	`undefined`	Eigenschaftsname (Punktpfad), nach dem die Dropdown-Elemente unter Optionsgruppen-Überschriften gruppiert werden.
`searchable / clearable (hub-select)`	`boolean`	`true`	Ob die Optionen durch Tippen gefiltert werden können (searchable) und ob die Auswahl mit der eingebauten Löschen-Schaltfläche geleert werden kann (clearable). Beide sind standardmäßig true.
`closeOnSelect (hub-select)`	`boolean`	`true`	Ob sich das Dropdown nach dem Auswählen eines Elements schließt. Auf false setzen, um es beim Auswählen mehrerer Werte im Multiple-Modus geöffnet zu halten.
`autoOpen (hub-select)`	`boolean`	`false`	Öffnet die Liste, sobald das Feld erscheint — für ein Feld, das etwas anderes für die Leserin schon geöffnet hat: eine Tabellenzelle, die zum Editor wird, eine Zeile, die zum Formular wird. Der Klick ist verbraucht, bevor das Feld existiert; ohne dies kostet das Feld einen Klick und die Liste einen zweiten.
`initialSearchTerm (hub-select)`	`string \| null`	`null`	Ein Suchbegriff, mit dem das Feld startet — angewandt beim Erscheinen und bevor die Liste aufgeht. Derselbe Fall wie autoOpen, einen Tastendruck früher: das Zeichen, das das Feld geöffnet hat, gehört in sein Suchfeld, sonst tippt man es zweimal.
`clearSearchOnAdd (hub-select)`	`boolean \| undefined`	`undefined (follows closeOnSelect)`	Ob das Suchfeld nach jeder Auswahl geleert wird. Ohne Wert folgt die Engine `closeOnSelect`, was passt, bis man beides trennen will: Ein Tag-Feld bleibt offen, um den nächsten Wert aufzunehmen, und muss den eben benutzten Begriff trotzdem vergessen.
`fixedPlaceholder (hub-select)`	`boolean`	`false`	Hält den Platzhalter auch dann sichtbar, wenn ein Wert ausgewählt ist. Standard: false (der Platzhalter wird bei Auswahl ausgeblendet) — kehrt damit den unkonventionellen Standard von ng-select v23 um.
`loading / notFoundText (hub-select)`	`boolean / string`	`false / NgSelectConfig.notFoundText`	loading rendert den Ladezustand des Dropdowns, während asynchrone Elemente geladen werden; notFoundText ist die Meldung, die angezeigt wird, wenn keine Elemente dem Suchbegriff entsprechen.
`readonly (hub-input, hub-select, hub-textarea, hub-datepicker, hub-otp-input, hub-timepicker)`	`boolean`	`false`	Wenn true, zeigt das Feld seinen Wert an, weist aber jede Interaktion zurück — ohne Disabled-Styling und ohne Änderung des Formularstatus.
`plaintext (hub-input, hub-textarea)`	`boolean`	`false`	Der Wert ohne Feld darum herum. `readonly` ist ein Zustand eines Feldes, das noch ausgefüllt wird, und ein Theme gibt ihm über `--hub-input-readonly-bg` / `-border-color` einen Kasten; `plaintext` ist für einen Wert, der lediglich gezeigt wird, und keinen Kasten zu haben ist das, was es ist. Mit den Standardwerten zeichnet auch `readonly` keinen — unverändert unterscheiden sich beide in horizontaler Polsterung, seitlicher Rahmenbreite, Cursor und Affordanzen. Impliziert `readonly`; beide Darstellungen schließen einander aus. Das Steuerelement bleibt ein echtes Input.
`appendTo (hub-select)`	`string \| undefined`	`'body'`	CSS-Selektor des Elements, an das das Dropdown-Panel angehängt wird. Standard: 'body', damit das Panel overflow-/transform-Vorfahren (Cards, Scroll-Container, Modals) entkommt; undefined übergeben, um es inline zu rendern.
`addTag (hub-select)`	`boolean \| ((term: string) => any \| Promise<any>)`	`false`	Erzeugt Elemente aus dem Suchbegriff (dropdown-Format): true fügt den Begriff unverändert hinzu; eine Funktion bildet den Begriff auf ein neues Element ab, synchron oder als Promise.
`addTagText (hub-select)`	`string`	`NgSelectConfig.addTagText`	Beschriftung der „Element hinzufügen“-Zeile, die beim Tippen erscheint, wenn addTag aktiviert ist.
`minTermLength (hub-select)`	`number`	`0`	Minimale Länge des Suchbegriffs, bevor das Filtern (oder das typeahead-Subject) greift.
`typeahead (hub-select)`	`Subject<string> \| undefined`	`undefined`	Subject, das Änderungen des Suchbegriffs für asynchrones/serverseitiges Laden empfängt; ist es gesetzt, wird das clientseitige Filtern abgeschaltet — die Ergebnisse über items zurückspielen.
`compareWith (hub-select)`	`((a: any, b: any) => boolean) \| undefined`	`undefined`	Eigene Gleichheit zwischen einem Element und dem gebundenen Wert (z. B. Objekte per id verglichen); ohne Angabe gilt der eingebaute Vergleich des Anbieters.
`searchFn (hub-select)`	`((term: string, item: any) => boolean) \| undefined`	`undefined`	Ersetzt den eingebauten Abgleich, den `searchable` verwendet. Erhält den eingegebenen Begriff und ein Element und gibt zurück, ob das Element passt — so kann eine Suche auch Felder berücksichtigen, die die Beschriftung nicht anzeigt.
`mode (hub-datepicker)`	`'single' \| 'range' \| 'day-time-range'`	`'single'`	Einzelnes Datum, freier Datumsbereich oder ein Tag mit Start- und Endzeit innerhalb dieses Tages.
`granularity (hub-datepicker)`	`'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	Genauigkeit jedes gewählten Punktes und das Panel, das ihn wählt: year und month zeigen ein Raster aus 12 Zellen, day den Kalender, und hour, minute und second ergänzen ihn um eine Zeitleiste. Orthogonal zu mode: mode sagt, wie viele Punkte gewählt werden, granularity, wie genau jeder einzelne ist. Standard ist day, das denselben YYYY-MM-DD-String wie bisher ausgibt; ab hour ist der Wert ein vollständiger ISO-8601-Zeitstempel mit der lokalen Uhrzeit des Lesers und dem Offset dieses Datums.
`valueFormat / parse (hub-datepicker)`	`'iso' \| 'date' \| 'timestamp' \| ((date) => unknown) / ((raw) => Date \| null) \| null`	`'iso' / null`	Die Wertachsen. valueFormat legt fest, was das gebundene Control enthält: 'iso' (Standard), 'date' für ein natives Date, 'timestamp' für Epoch-Millisekunden oder eine Funktion für alles andere. parse legt fest, wie ein eingehender Wert gelesen wird, und ersetzt die eingebaute Erkennung von ISO-Strings jeder Breite, Date-Instanzen und Epoch-Millisekunden — und gilt auch für min und max.
`minuteStep / secondStep / hourFormat (hub-datepicker)`	`number / number / '12' \| '24' \| undefined`	`5 / 1 / undefined`	Zeit-Steuerung: minuteStep und secondStep sind die Schrittweiten der Spinbuttons, und hourFormat erzwingt eine 12- oder 24-Stunden-Uhr — ohne Angabe aus der Locale abgeleitet und sowohl auf die Feldanzeige als auch auf das Panel angewendet, damit beide sich nie widersprechen können. Alle drei greifen auf die globale provideHubForms-Konfiguration zurück.
`min / max / disabledDates (hub-datepicker)`	`string \| Date \| number \| null / ((date: Date) => boolean) \| null`	`null`	Auswählbare Grenzen und ein Prädikat zum Deaktivieren einzelner Daten. Die Grenzen berücksichtigen die Uhrzeit, nicht nur den Tag: Ein Tag wird nur deaktiviert, wenn kein Zeitpunkt darin erlaubt ist, sodass min = 2026-09-01T14:00 den 1. September klickbar lässt und die Zeit-Steuerung die früheren Stunden ablehnt. Akzeptiert einen ISO-String, ein Date oder Epoch-Millisekunden.
`locale / firstDayOfWeek / weekdayFormat (hub-datepicker)`	`string / number / 'short' \| 'narrow' \| 'long'`	`LOCALE_ID / undefined / undefined`	Kalender-i18n: locale ist das BCP-47-Tag für den Anzeigewert und die Monats-/Wochentagsnamen (Standard: die LOCALE_ID der App, mit Rückfall auf en-US); firstDayOfWeek legt den ersten Wochentag fest (0 = Sonntag, 1 = Montag…); weekdayFormat wählt die Breite der Wochentags-Kopfzeile. Die letzten beiden greifen auf die globale provideHubForms-Konfiguration zurück.
`monthFormat (hub-datepicker)`	`'short' \| 'long'`	`'short'`	Wie die Kopfzeile des Panels den Monat benennt. Standardmäßig abgekürzt, weil das Panel genau so breit ist wie das Tagesraster und die Kopfzeile nimmt, was die Navigationsschaltflächen übrig lassen — 102px, während ein ausgeschriebenes «septiembre de 2026» 152 braucht und abgeschnitten würde. Fordere `long` dort an, wo du das Panel verbreitert hast, über `--hub-daterangepicker-cell-size` oder `--hub-datepicker-grid-gap`. Das Verbreitern ist global: Der Kalender wird in einem an `document.body` gehängten Overlay gezeichnet, eine am Feld gesetzte Custom Property erreicht ihn also nie — deklariere die Tokens auf `:root`.
`displayFormat / timeDisplayFormat / rangeSeparator / labels (hub-datepicker)`	`Intl.DateTimeFormatOptions \| string \| ((date) => string) / Intl.DateTimeFormatOptions / string / Partial<HubDatepickerLabels>`	`undefined / undefined / undefined / {}`	Anzeigeformatierung: displayFormat rendert den ausgewählten Wert und akzeptiert Intl.DateTimeFormatOptions, ein Angular-Datumsmuster wie 'dd/MM/yyyy HH:mm' oder eine Funktion; timeDisplayFormat wird darüber gelegt, sobald die Granularität eine Uhrzeit trägt, sodass der Datumsteil behält, was displayFormat vorgab; rangeSeparator ist der Text zwischen den beiden Daten eines Bereichs; und labels überschreibt die UI-Beschriftungen pro Instanz (über die globale Konfiguration gemischt).
`clearable / showToday / closeOnSelect (hub-datepicker)`	`boolean`	`true / true / true`	Verhaltens-Flags: clearable zeigt den Löschen-Shortcut, showToday zeigt den „Heute“-Shortcut und closeOnSelect schließt den Kalender nach der Datumswahl (nur im Single-Modus). Standardwerte: true / true / true.
`multiple (hub-file-input)`	`boolean`	`false`	Ob mehr als eine Datei gehalten werden kann. Ändert den Steuerwert von File zu File[].
`accept (hub-file-input)`	`string`	`'*'`	Erlaubte Dateitypen, z. B. image/*,.pdf. Gilt auch beim Ablegen und Einfügen, nicht nur im Systemdialog.
`maxSize / minSize / maxTotalSize (hub-file-input)`	`number \| null`	`null`	Maximale und minimale Größe je Datei sowie maximale Gesamtgröße, in Bytes.
`maxFiles (hub-file-input)`	`number \| null`	`null`	Maximale Anzahl an Dateien. Nur zusammen mit multiple sinnvoll.
`dragDrop / paste (hub-file-input)`	`boolean`	`true`	Ob Dateien auf das Feld gezogen und ob sie hineingefügt werden können.
`appearance (hub-file-input)`	`'dropzone' \| 'compact'`	`'dropzone'`	Wie viel Platz das leere Feld einnimmt. `dropzone` ist die hohe Fläche mit Glyphe und Ziehtext. `compact` ist dasselbe Feld in einer Zeile — Auswahlschaltfläche und Einschränkungen — für das Logo oder die Unterschrift, um die es auf dem Bildschirm gerade nicht geht. Ablegen funktioniert in beiden Fällen weiter: Es verschwindet der Text, der es beschrieb, nicht das Verhalten.
`preview (hub-file-input)`	`'none' \| 'list' \| 'grid' \| 'inline'`	`'list'`	Wie die Dateien angezeigt werden: gar nicht, als Liste, als Kacheln unter der Ablagezone (grid) oder als Kacheln im Feld (inline). Eine einzelne Inline-Kachel füllt das Feld; mit multiple bilden die Kacheln ein Raster, das mit einer Kachel zum Hinzufügen endet.
`currentFile (hub-file-input)`	`string \| HubCurrentFile \| readonly (string \| HubCurrentFile)[] \| null`	`null`	Die Dateien, die der Datensatz bereits hat, angezeigt von preview="inline": eine URL, ein HubCurrentFile { url, name?, type? } oder mit multiple eine Liste davon. Nur zur Anzeige: Sie gelangen nie in den Formularwert.
`imagePreview (hub-file-input)`	`boolean`	`true`	Ob Bilder als Bilder angezeigt werden. Ausgeschaltet wird jede Datei mit dem Symbol ihrer Familie gezeichnet, und für Vorschaubilder wird keine Object-URL erzeugt.
`readonly (hub-file-input)`	`boolean`	`false`	Die Dateien bleiben sichtbar und lassen sich öffnen, aber keine kann gewählt, abgelegt, eingefügt, ersetzt oder entfernt werden. Anders als bei disabled behält das Feld den Fokus und wird mitgesendet.
`clearable (hub-file-input)`	`boolean`	`true`	Ob der Benutzer entfernen darf, was das Feld enthält, gewählt oder gespeichert. Gilt auch für die Entfernen-Schaltflächen und „Remove all“ von list und grid.
`allowDuplicates (hub-file-input)`	`boolean`	`false`	Ob dieselbe Datei zweimal ausgewählt werden kann (Schlüssel: Name, Größe, Änderungsdatum).
`capture (hub-file-input)`	`'user' \| 'environment' \| null`	`null`	Öffnet auf unterstützten Plattformen die Gerätekamera statt des Dateibrowsers.
`autoUpload (hub-file-input)`	`boolean`	`true`	Ob eine neu akzeptierte Datei sofort hochgeladen wird. Ohne registrierten Uploader wirkungslos.
`buttonLabel / hint (hub-file-input)`	`string \| null`	`null`	Überschreibt den Text der Durchsuchen-Schaltfläche und den automatisch erzeugten Hinweis zu den Beschränkungen.
`dropText / dropSubtext (hub-file-input)`	`string \| null`	`null`	Überschreibt je Instanz die beiden Einladungszeilen der Ablagezone. Beide greifen sonst auf die globalen Beschriftungen zurück.
`classlist (every field except hub-segmented and hub-legend)`	`string`	`''`	Zusätzliche CSS-Klassen für das Host-Element.
`showValid (all fields)`	`boolean`	`HubFormsConfig.showValid`	Ob ein gültiges Feld seinen gültigen Zustand anzeigt. Standardmäßig aus, denn ein Formular, das jedes unberührte Feld grün einfärbt, sagt nichts aus; der ungültige Zustand wird immer angezeigt.
`validFeedback (all fields)`	`string \| null`	`null`	Meldung, die unter dem Feld angezeigt wird, sobald es gültig ist — sofern `showValid` aktiviert ist.
`invalidFeedbackTemplateFn (all fields)`	`((key: string, value: any) => string) \| null`	`null`	Überschreibt die Meldung für einen bestimmten Fehlerschlüssel allein für dieses Feld. Erhält den Fehlerschlüssel und dessen Wert und gibt den Text zurück — der anwendungsweite Standard liegt in `provideHubForms`.
`min / max (hub-input)`	`number \| undefined (two-way, model)`	`undefined`	Numerische Grenzen für die Formate number und counter. Bidirektional, sodass ein Zähler, der seinen eigenen Wert begrenzt, die Grenze zurückmeldet.
`accept / multiple / buttonLabel (hub-input) — deprecated`	`string / boolean / string`	`'*' / false / 'Choose file'`	Überbleibsel des veralteten file-Formats von hub-input. Weiterhin öffentlich und weiterhin wirksam, doch die Dateiauswahl liegt jetzt bei hub-file-input, das accept auch beim Ablegen und Einfügen durchsetzt und nicht nur im Systemdialog. Entfällt im nächsten Major-Release.
`hubAutoresize (textarea[hubAutoresize])`	`boolean`	`true`	Eigenständige Direktive für ein einfaches textarea: Sie lässt das Element auf seinen Inhalt wachsen. hub-textarea wendet sie über den eigenen autoresize-Input selbst an; so erreicht man sie auf einem Textarea, das der Bibliothek nicht gehört.
`mode (hub-otp-input)`	`'numeric' \| 'alphanumeric' \| 'alpha'`	`'numeric'`	Welche Zeichen ein Feld akzeptiert und welche Tastatur ein Telefon anbietet: nur Ziffern oder Buchstaben und Ziffern.
`min / max (hub-timepicker)`	`string (HH:MM)`	`''`	Früheste und späteste Uhrzeit, die das Feld akzeptiert, als `HH:MM`. Leer bedeutet unbegrenzt.
`step (hub-timepicker)`	`number (seconds)`	`0`	Granularität des nativen Steppers, in Sekunden. `0` belässt den Browser-Standard von einer Minute.
`group / groupName (form[hubForm], hub-fieldset, fieldset[hubFieldset])`	`AbstractControl \| null / string \| undefined`	`null / undefined`	Die Gruppe, deren Fehler der Container anzeigt. Übergeben Sie `group` direkt ein `AbstractControl` oder `groupName` den Namen eines Kindes des umgebenden Formulars — beides ist nicht nötig, wenn der Container die Gruppe, über die er berichtet, bereits umschließt.
`errorTrigger (form[hubForm], hub-fieldset, fieldset[hubFieldset])`	`'touched' \| 'submit' \| 'always'`	`'touched'`	Wann Fehler auf Gruppenebene sichtbar werden: sobald die Gruppe berührt wurde, erst nach einem Absendeversuch oder sofort.
`formTextType (all fields)`	`'bottom' \| 'tooltip'`	`'bottom'`	Wo der Hilfetext erscheint: `bottom` (Standard) zeichnet ihn unter das Steuerelement, `tooltip` legt ihn hinter ein Fragezeichen am Ende der Beschriftungszeile. Die Regel: ein Satz darunter, mehr als einer in den Tooltip — ein Absatz unter jedem Feld macht aus dem Formular ein Dokument. Der Auslöser ist eine Schaltfläche neben der Beschriftung, nie darin, und ihr zugänglicher Name ist der Hilfetext selbst.
`rows (hub-textarea)`	`number`	—	Anzahl der sichtbaren Textzeilen.
`cols (hub-textarea)`	`number`	—	Anzahl der sichtbaren Spalten. Ist der Wert gesetzt, dehnt sich das Textfeld nicht mehr auf die volle Breite.
`maxlength (hub-textarea)`	`number`	—	Maximale Zeichenzahl. Steuert sowohl das native Limit als auch den Zähler.
`counter (hub-textarea)`	`boolean`	—	Ob unter dem Steuerelement ein Zeichenzähler angezeigt wird.
`autoresize (hub-textarea)`	`boolean`	—	Ob das Textfeld mit seinem Inhalt mitwächst.
`length (hub-otp-input)`	`number`	—	Anzahl der Felder bzw. Zeichen des Codes.
`secret (hub-otp-input)`	`boolean`	—	Maskiert die Zeichen wie ein Passwort.
`separator (hub-otp-input)`	`string`	—	Das Trennzeichen zwischen den Gruppen.
`separatorEvery (hub-otp-input)`	`number`	—	Fügt alle N Felder einen sichtbaren Trenner ein (0 = keiner).
`showValue (hub-slider)`	`boolean`	—	Ob die Wertblasen über den Reglern angezeigt werden.
`step (hub-input, hub-slider)`	`number`	—	Schrittweite (numerische Felder bzw. Zähler).
`min / max (hub-slider)`	`number`	`0 / 100`	Grenzen des Bereichs, den der Regler durchläuft. Die Schrittweite bestimmt step; bei einem Slider mit zwei Reglern gelten die Grenzen für beide.
`legend (hub-fieldset, fieldset[hubFieldset])`	`string`	—	Text der Legende. Wird ignoriert, wenn ein `hubLegend`-Template projiziert wird.
`required (all fields)`	`boolean \| null (two-way, model)`	`null`	Ob das Feld ein Pflichtfeld ist. Bei einer reaktiven Bindung wird es aus den Validatoren des Steuerelements selbst abgeleitet, sodass eine direkte Angabe im Template nur bei template-getriebenen Feldern berücksichtigt wird; es steuert das Sternchen und das `required`-Attribut.
`required (hub-legend)`	`boolean`	—	Ob der Pflichtfeld-Indikator dargestellt wird.
`invalid (hub-legend)`	`boolean`	—	Ob die Darstellung für den ungültigen Zustand angewendet wird.
`hubFileDrop (directive)`	`'element' \| 'window'`	`'element'`	Wo `hubFileDrop` das Ziehen beobachtet: am Hostelement samt Teilbaum oder auf der ganzen Seite. Der Fensterbereich verhindert außerdem, dass der Browser eine Datei öffnet, die neben statt auf dem Ziel abgelegt wurde — und damit die Seite samt allem Eingetippten verliert.
`accept / maxSize / minSize / maxFiles / dropDisabled / overlay / dropText / dropSubtext (hubFileDrop)`	`string / number \| null / number \| null / number \| null / boolean / boolean / string \| null / string \| null`	`'*' / null / null / null / false / true / null / null`	Die Zone wendet dieselben Einschränkungen an wie ein Dateifeld und meldet Abgelehntes in derselben `HubFileRejection`-Form. `overlay` schaltet die gezeichnete Karte ab und lässt Verhalten und die Klasse `hub-file-drop--active` für eine eigene übrig; `dropText` und `dropSubtext` sind ihre beiden Zeilen, die zweite fällt auf die ausgeschriebenen Einschränkungen zurück.

Outputs

Reagiere darauf, was forms tut — 16 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`valueChange (every field except hub-timepicker)`	`EventEmitter<value>`	Wird ausgelöst, wann immer sich der Feldwert ändert.
`change (hub-select)`	`EventEmitter<item \| item[]>`	Gibt bei jeder Änderung der Auswahl das ausgewählte Element aus — das ganze Objekt, nicht den gebundenen Wert —, so wie `ng-select` es unter diesem Namen immer ausgegeben hat. Es ist eine echte Ausgabe: Zuvor war `(change)` am Element ein gewöhnlicher DOM-Listener, der auffing, was das innere Eingabefeld hochreichte, und bei einem von einem asynchronen `addTag` erzeugten Wert nie auslöste.
`search (hub-input)`	`EventEmitter<string>`	Entprellter Typeahead-Begriff, der während der Eingabe ausgegeben wird (Textfelder).
`rejected (hub-file-input)`	`EventEmitter<HubFileRejection[]>`	Die von den deklarierten Beschränkungen abgelehnten Dateien, jeweils mit dem Grund der Ablehnung.
`fileRemoved (hub-file-input)`	`EventEmitter<File>`	Eine gewählte Datei, die die Auswahl verlassen hat: entfernt oder über ihre Kachel ersetzt.
`currentFileRemoved (hub-file-input)`	`EventEmitter<HubCurrentFile>`	Eine gespeicherte Datei (currentFile), die das Feld verlassen hat: entfernt oder durch eine gewählte Datei ersetzt. Der Formularwert hat sie nie enthalten; das ist das Signal, sie auf dem Server zu löschen.
`uploadStateChange (hub-file-input)`	`EventEmitter<readonly HubFileItem[]>`	Die vollständige Elementliste, sobald ein Upload Status oder Fortschritt ändert.
`filesDropped / rejected (hubFileDrop)`	`EventEmitter<File[]> / EventEmitter<HubFileRejection[]>`	Was ein Ablegen auf einer `hubFileDrop`-Zone hinterlässt: die Dateien, die alle Einschränkungen bestanden haben, und die anderen mit Grund und überschrittenem Grenzwert. Keine der beiden wird leer ausgegeben.
`submit (form[hubForm]) — the native event`	`SubmitEvent (native, not a custom output)`	Kein eigener Output: `hubForm` lauscht auf das `submit`-Ereignis des Formulars selbst, verhindert die Standard-Navigation, markiert den Baum als berührt und setzt den submitted-Status. Binden Sie `(submit)` am Formular für Ihren eigenen Handler.
`disabledChange / requiredChange (all fields) · labelTypeChange / placeholderChange / minChange / maxChange / passwordRevealedChange / indeterminateChange (hub-input) · valueChange (hub-segmented)`	`EventEmitter<T> (the paired half of each two-way model)`	Jeder bidirektionale `model()`-Input veröffentlicht einen passenden `Change`-Output, damit `[(disabled)]` und Ähnliches funktionieren. Sie sind hier aufgeführt, weil die Banana-in-a-Box-Syntax sie verbirgt.
`opened / closed / cleared / viewChange (hub-datepicker)`	`EventEmitter`	Kalender-Lebenszyklus- und Navigationsereignisse.
`onOpen / onClose / onClear / onSearch / onAdd / onRemove (hub-select)`	`EventEmitter`	Dropdown-Lebenszyklus- und Tag-/Typeahead-Ereignisse.
`onFocus / onBlur (hub-select)`	`EventEmitter<any>`	Werden ausgelöst, wenn das Dropdown-Steuerelement den Fokus erhält oder verliert (dropdown-Format), und reichen die focus/blur-Ereignisse des Anbieters weiter.
`scroll / scrollToEnd (hub-select)`	`EventEmitter<{ start: number; end: number }> / EventEmitter<any>`	scroll gibt das sichtbare { start, end }-Fenster aus, während die Dropdown-Liste scrollt; scrollToEnd wird ausgelöst, wenn die Liste ihr Ende erreicht — der Hook für unendliches/seitenweises Laden mit typeahead.
`enter (hub-input)`	`EventEmitter<number \| string \| boolean \| File \| FileList \| null>`	Gibt den aktuellen Wert aus, wenn Enter gedrückt wird.
`completed (hub-otp-input)`	`EventEmitter<string>`	Gibt den vollständigen Code aus, sobald alle Felder gefüllt sind.

Templates

Mach es zu deinem — 11 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`hubFormText`	Projiziert reichhaltigen Hilfetext-Inhalt.	`<ng-template hubFormText>…</ng-template>`
`hubValidationError`	Überschreibt die Meldung für einen bestimmten Fehlerschlüssel.	`<ng-template hubValidationError key="min">…</ng-template>`
`hub-legend`	Die Legende des fieldset, als Element projiziert — sie trägt die Pflichtmarkierung und den Invalid-Zustand.	`<hub-legend [required]="true">Shipping address</hub-legend>`
`hubSelectOption (hub-select)`	Benutzerdefiniertes Rendern der Dropdown-Optionen. Einer der hubSelect*-Slots — hubSelectLabel, hubSelectHeader, hubSelectFooter, hubSelectNotFound und die übrigen decken die anderen Teile des Panels ab.	`<ng-template hubSelectOption let-item="item">…</ng-template>`
`hubFileIcon (hub-file-input)`	Symbol je Datei für Dateien ohne Miniaturbild; erhält das Element als impliziten Kontext.	`<ng-template hubFileIcon let-item>…</ng-template>`
`hubFilePreview (hub-file-input)`	Ersetzt die gesamte Darstellung einer ausgewählten Datei und erhält das Element sowie die Aktionen Entfernen, Wiederholen und Abbrechen.	`<ng-template hubFilePreview let-item let-remove="remove">…</ng-template>`
`hubFileDropzoneNotice (hub-file-input)`	Projiziert beliebiges Markup oben in der Ablagezone, über dem Symbol — für einen Hinweis, den weder die Einladung noch der Hinweis auf die Beschränkungen ausdrücken kann.	`<p hubFileDropzoneNotice>2 documents still missing</p>`
`hubSegmentedOption (hub-segmented)`	Ersetzt den Inhalt jedes Segments (Icons, Badges, reichhaltiges Markup), während die Komponente weiterhin Auswahl, Tastaturnavigation und ARIA steuert. Kontext: die Option (implizit), selected und index.	`<ng-template hubSegmentedOption let-option let-selected="selected" let-index="index">…</ng-template>`
`hubSelectSuffix (hub-select, veraltet)`	Veraltet seit 22.16.0 — verwenden Sie [hubAppend], das auf jedem Feld dasselbe tut. Es funktioniert weiterhin; [hubAppend] gewinnt, wenn beide vorhanden sind. Fügt ein interaktives Element an die Endkante des Selects — eine Schaltfläche, die auf die Auswahl wirkt: konfigurieren, nachschlagen, neu anlegen. Als Template deklariert und nicht als projizierter Inhalt, weil das Sammel-ng-content des Selects die ng-option-Elemente an die Engine weitergibt und es verschlucken würde; das Rendern aus einem Template hält die Aktion außerdem im DOM hinter dem Control, sodass die Tabulatorreihenfolge zuerst das Feld erreicht. Control und Aktion teilen einen Rahmen und lesen sich als ein Feld.	`<ng-template hubSelectSuffix><button …>…</button></ng-template>`
`hubPrepend / hubAppend (all box-shaped fields)`	An die Kante eines Feldes angefügter Inhalt, reicher als der Text, den ein prepend-/append-String tragen kann: ein Icon oder eine Schaltfläche, die auf den Wert wirkt. Verfügbar bei jedem Feld, das als Kasten mit einem Wert erscheint — hub-input, hub-select, hub-textarea und hub-datepicker. Es ergänzt die Text-Addons, statt sie zu ersetzen: die Strings werden zuerst gerendert, sodass projizierter Inhalt immer das äußerste Element seiner Seite ist — eine Einheit beschriftet das Feld, die Aktion liegt dahinter. Das Projizierte trägt Rahmen, Radius und Höhe des Feldes statt der eigenen, damit eine Schaltfläche keine zweite, dickere Naht neben dem Control zeichnet. Als Template deklariert, weil das ng-content des Feldes bereits vergeben ist. Ein Slot kann auch ein weiteres Feld aufnehmen — hub-input, hub-select, hub-textarea oder hub-datepicker als direktes Kind —, das bündig mit dem tragenden Feld abschließt, damit ein Preis und der Zeitraum, für den er gilt, als die eine Aussage gelesen werden, die sie sind.	`<ng-template hubAppend><button …><hub-icon … /></button></ng-template>`
`hubInputPrefix / hubInputSuffix (hub-input)`	Projiziert Inhalt in den Affix-Bereich am Zeilenanfang oder Zeilenende des Feldes — ein vorangestelltes Icon, ein Währungszeichen, ein Inline-SVG. Attributdirektiven statt Templates: Sie gehören an das projizierte Element selbst. Das Feld reserviert den inneren Abstand, damit sein Text nie unter dem Affix liegt, und gestaltet ein projiziertes hub-icon mit seinen --hub-input-icon-*-Tokens. Beide Kanten folgen der Schreibrichtung und kippen daher unter dir="rtl". Für einen Lösch-Button ist der eingebaute clearable-Input die bessere Wahl.	`<hub-icon hubInputPrefix name="fa:solid:magnifying-glass" />`