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 14 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`	`'stacked' \| 'floating' \| 'horizontal'`	`'stacked'`	Platzierung der Beschriftung.
`placeholder`	`string`	`''`	Platzhaltertext.
`formText`	`string`	—	Hilfetext, der unter dem Steuerelement angezeigt wird.
`type (hub-input)`	`'text' \| 'number' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'color' \| 'checkbox' \| 'switch' \| 'counter' \| 'file'`	`'text'`	Das hub-input-Format.
`prepend / append (hub-input)`	`string \| string[]`	—	Input-Group-Addon-Text vor / nach dem Steuerelement.
`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.
`range (hub-slider)`	`boolean`	`false`	Bereichsregler mit zwei Reglern; der Wert wird zu einem [lower, upper]-Tupel.
`format (hub-select)`	`'dropdown' \| 'buttons' \| 'checkbox' \| 'radio'`	`'dropdown'`	Wie das Select denselben Wert rendert.
`items / bindLabel / bindValue / multiple (hub-select)`	`any[] / string / string / boolean`	—	Optionen, die label/value-Eigenschaftsnamen für Objektelemente und Mehrfachauswahl.
`mode (hub-datepicker)`	`'single' \| 'range'`	`'single'`	Einzelnes Datum oder Datumsbereich.
`min / max / disabledDates (hub-datepicker)`	`string \| Date / (date) => boolean`	—	Grenzen für auswählbare Daten und ein pro-Datum-Deaktivierungsprädikat.

Outputs

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

Name	Typ	Beschreibung
`valueChange`	`EventEmitter<value>`	Wird ausgelöst, wann immer sich der Feldwert ändert.
`submit (form[hubForm])`	`EventEmitter<void>`	Wird beim Absenden ausgelöst, nachdem der Baum als berührt markiert wurde.
`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.

Templates

Mach es zu deinem — 4 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>`
`hubLegend`	Benutzerdefinierter fieldset-Legenden-Inhalt.	`<ng-template hubLegend>…</ng-template>`
`ng-option-tmp (hub-select)`	Benutzerdefiniertes Rendern von Dropdown-Optionen (re-exportierte ng-select-Direktive).	`<ng-template ng-option-tmp let-item="item">…</ng-template>`

CSS-Variablen

Gestalte jedes Pixel mit 17 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.

Gemeinsame Feld-Tokens

Von jedem Feld geteilte Gestaltung: Label, Hilfetext, Validierungs-Feedback und Fokus-Ring.

Variable	Standard	Typ	Beschreibung
`--hub-label-font-weight`	`var(--hub-ref-font-weight-medium)`	string	Schriftstärke des Feld-Labels.
`--hub-form-feedback-color`	`var(--hub-sys-color-danger)`	color	Schriftfarbe von Validierungsfehlern.
`--hub-form-text-color`	`var(--hub-sys-text-muted)`	color	Farbe des Hilfetextes.
`--hub-form-focus-ring-color`	`var(--hub-sys-focus-ring-color)`	color	Farbe des Fokus-Rings.
`--hub-form-invalid-border-color`	`var(--hub-sys-color-danger)`	color	Rahmenfarbe ungültiger Steuerelemente.

Input

Das Text-Steuerelement-Erscheinungsbild, das von input, textarea und dem select-Trigger geteilt wird.

Variable	Standard	Typ	Beschreibung
`--hub-input-bg`	`var(--hub-sys-surface-page)`	color	Hintergrund des Steuerelements.
`--hub-input-border-color`	`var(--hub-sys-border-color-default)`	color	Rahmenfarbe des Steuerelements.
`--hub-input-border-radius`	`var(--hub-ref-radius-md)`	length	Rahmenradius des Steuerelements.
`--hub-input-padding-y`	`0.375rem`	length	Vertikaler Innenabstand des Steuerelements.
`--hub-input-padding-x`	`0.75rem`	length	Horizontaler Innenabstand des Steuerelements.
`--hub-input-focus-border-color`	`var(--hub-sys-color-primary)`	color	Rahmenfarbe bei Fokus.

Select, Slider & Datepicker

Komponentenspezifische Akzente, die an die System-Tokens anknüpfen.

Variable	Standard	Typ	Beschreibung
`--hub-select-option-selected-bg`	`var(--hub-sys-color-primary)`	color	Hintergrund der ausgewählten Dropdown-Option.
`--hub-select-value-bg`	`var(--hub-sys-surface-elevated)`	color	Hintergrund des Multi-Select-Chips.
`--hub-slider-track-fill-bg`	`var(--hub-sys-color-primary)`	color	Gefüllter Bereich der Slider-Spur.
`--hub-slider-thumb-bg`	`var(--hub-sys-color-primary)`	color	Farbe des Slider-Thumbs.
`--hub-daterangepicker-active-bg`	`var(--hub-sys-color-primary)`	color	Hintergrund des ausgewählten Kalendertags.
`--hub-daterangepicker-in-range-bg`	`color-mix(in srgb, var(--hub-sys-color-primary) 14%, transparent)`	color	Hintergrund eines Kalendertags im ausgewählten Bereich.

Styling und Theming

Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.