Référence API

Voici le contrat complet de forms : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.

Inputs

Réglez forms à votre goût avec 14 inputs. Liez-les comme n’importe quel @Input Angular.

Nom	Type	Par défaut	Description
`formControlName / [formControl]`	`string \| FormControl`	—	Lie n'importe quel champ à un contrôle réactif. Les erreurs s'affichent automatiquement lorsque le contrôle est touché et invalide.
`label`	`string`	`''`	Texte du libellé du champ.
`labelType`	`'stacked' \| 'floating' \| 'horizontal'`	`'stacked'`	Positionnement du libellé.
`placeholder`	`string`	`''`	Texte de l'espace réservé.
`formText`	`string`	—	Texte d'aide affiché sous le contrôle.
`type (hub-input)`	`'text' \| 'number' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'color' \| 'checkbox' \| 'switch' \| 'counter' \| 'file'`	`'text'`	Le format de hub-input.
`prepend / append (hub-input)`	`string \| string[]`	—	Texte de l'addon de l'input-group avant / après le contrôle.
`mask (hub-input)`	`string`	—	Masque de motif pour les formats texte. Jetons : 0 = chiffre, A = lettre, * = alphanumérique ; les autres caractères sont des séparateurs littéraux. Par ex. "0000 0000 0000 0000".
`unmaskValue (hub-input)`	`boolean`	`false`	Avec un masque défini, stocke les caractères saisis bruts (sans séparateurs) dans le formulaire au lieu du texte formaté.
`range (hub-slider)`	`boolean`	`false`	Curseur de plage à deux poignées ; la valeur devient un tuple [lower, upper].
`format (hub-select)`	`'dropdown' \| 'buttons' \| 'checkbox' \| 'radio'`	`'dropdown'`	Comment le select rend la même valeur.
`items / bindLabel / bindValue / multiple (hub-select)`	`any[] / string / string / boolean`	—	Options, les noms de propriétés label/value pour les éléments objets, et la sélection multiple.
`mode (hub-datepicker)`	`'single' \| 'range'`	`'single'`	Date unique ou plage de dates.
`min / max / disabledDates (hub-datepicker)`	`string \| Date / (date) => boolean`	—	Bornes des dates sélectionnables et un prédicat de désactivation par date.

Outputs

Réagissez à ce que fait forms — 4 événements sur lesquels accrocher votre logique.

Nom	Type	Description
`valueChange`	`EventEmitter<value>`	Émet chaque fois que la valeur du champ change.
`submit (form[hubForm])`	`EventEmitter<void>`	Émet à la soumission, après que l'arbre est marqué comme touché.
`opened / closed / cleared / viewChange (hub-datepicker)`	`EventEmitter`	Événements de cycle de vie et de navigation du calendrier.
`onOpen / onClose / onClear / onSearch / onAdd / onRemove (hub-select)`	`EventEmitter`	Événements de cycle de vie du dropdown et de tag/typeahead.

Templates

Faites-le vôtre — 4 emplacements de template vous permettent de projeter votre propre balisage.

Nom	Description	Exemple
`hubFormText`	Projetez un contenu de texte d'aide enrichi.	`<ng-template hubFormText>…</ng-template>`
`hubValidationError`	Remplacez le message pour une clé d'erreur donnée.	`<ng-template hubValidationError key="min">…</ng-template>`
`hubLegend`	Contenu personnalisé de légende du fieldset.	`<ng-template hubLegend>…</ng-template>`
`ng-option-tmp (hub-select)`	Rendu personnalisé des options du dropdown (directive ng-select réexportée).	`<ng-template ng-option-tmp let-item="item">…</ng-template>`

Variables CSS

Personnalisez chaque pixel avec 17 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.

Tokens de champ partagés

Habillage commun à chaque champ : libellé, texte d'aide, retour de validation et anneau de focus.

Variable	Par défaut	Type	Description
`--hub-label-font-weight`	`var(--hub-ref-font-weight-medium)`	string	Graisse du libellé du champ.
`--hub-form-feedback-color`	`var(--hub-sys-color-danger)`	color	Couleur du texte des erreurs de validation.
`--hub-form-text-color`	`var(--hub-sys-text-muted)`	color	Couleur du texte d'aide.
`--hub-form-focus-ring-color`	`var(--hub-sys-focus-ring-color)`	color	Couleur de l'anneau de focus.
`--hub-form-invalid-border-color`	`var(--hub-sys-color-danger)`	color	Couleur de la bordure d'un contrôle invalide.

Input

L'habillage de contrôle textuel partagé par input, textarea et le déclencheur du select.

Variable	Par défaut	Type	Description
`--hub-input-bg`	`var(--hub-sys-surface-page)`	color	Arrière-plan du contrôle.
`--hub-input-border-color`	`var(--hub-sys-border-color-default)`	color	Couleur de la bordure du contrôle.
`--hub-input-border-radius`	`var(--hub-ref-radius-md)`	length	Rayon de bordure du contrôle.
`--hub-input-padding-y`	`0.375rem`	length	Rembourrage vertical du contrôle.
`--hub-input-padding-x`	`0.75rem`	length	Rembourrage horizontal du contrôle.
`--hub-input-focus-border-color`	`var(--hub-sys-color-primary)`	color	Couleur de la bordure lors du focus.

Select, slider et datepicker

Accents spécifiques aux composants qui se rattachent aux tokens du système.

Variable	Par défaut	Type	Description
`--hub-select-option-selected-bg`	`var(--hub-sys-color-primary)`	color	Arrière-plan de l'option sélectionnée dans le dropdown.
`--hub-select-value-bg`	`var(--hub-sys-surface-elevated)`	color	Arrière-plan des puces du multi-select.
`--hub-slider-track-fill-bg`	`var(--hub-sys-color-primary)`	color	Portion remplie de la piste du slider.
`--hub-slider-thumb-bg`	`var(--hub-sys-color-primary)`	color	Couleur du curseur du slider.
`--hub-daterangepicker-active-bg`	`var(--hub-sys-color-primary)`	color	Arrière-plan du jour sélectionné dans le calendrier.
`--hub-daterangepicker-in-range-bg`	`color-mix(in srgb, var(--hub-sys-color-primary) 14%, transparent)`	color	Arrière-plan des jours du calendrier dans la plage sélectionnée.

Styles et theming

Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.