API リファレンス

forms の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

14 個のインプットで forms を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`formControlName / [formControl]`	`string \| FormControl`	—	任意のフィールドをリアクティブコントロールにバインドします。コントロールが touched かつ無効な場合、エラーが自動的に表示されます。
`label`	`string`	`''`	フィールドのラベルテキスト。
`labelType`	`'stacked' \| 'floating' \| 'horizontal'`	`'stacked'`	ラベルの配置。
`placeholder`	`string`	`''`	プレースホルダーテキスト。
`formText`	`string`	—	コントロールの下に表示されるヘルパーテキスト。
`type (hub-input)`	`'text' \| 'number' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'color' \| 'checkbox' \| 'switch' \| 'counter' \| 'file'`	`'text'`	hub-input のフォーマット。
`prepend / append (hub-input)`	`string \| string[]`	—	コントロールの前後に表示される input-group のアドオンテキスト。
`mask (hub-input)`	`string`	—	テキストフォーマット用のパターンマスク。トークン: 0 = 数字、A = 英字、* = 英数字。その他の文字はリテラルな区切り文字です。例: "0000 0000 0000 0000"。
`unmaskValue (hub-input)`	`boolean`	`false`	マスクを設定した場合、フォーマット済みテキストの代わりに、入力された生の文字（区切り文字なし）をフォームに保存します。
`range (hub-slider)`	`boolean`	`false`	2 つのつまみを持つレンジスライダー。値は [lower, upper] のタプルになります。
`format (hub-select)`	`'dropdown' \| 'buttons' \| 'checkbox' \| 'radio'`	`'dropdown'`	select が同じ値をどのようにレンダリングするか。
`items / bindLabel / bindValue / multiple (hub-select)`	`any[] / string / string / boolean`	—	選択肢、オブジェクト項目の label/value プロパティ名、および複数選択。
`mode (hub-datepicker)`	`'single' \| 'range'`	`'single'`	単一の日付または日付範囲。
`min / max / disabledDates (hub-datepicker)`	`string \| Date / (date) => boolean`	—	選択可能な日付の範囲と、日付ごとの無効化を判定する述語。

アウトプット

forms の動作に反応 — ロジックを接続できる 4 個のイベント。

名前	型	説明
`valueChange`	`EventEmitter<value>`	フィールドの値が変化するたびに発行されます。
`submit (form[hubForm])`	`EventEmitter<void>`	ツリーが touched としてマークされた後、送信時に発行されます。
`opened / closed / cleared / viewChange (hub-datepicker)`	`EventEmitter`	カレンダーのライフサイクルおよびナビゲーションイベント。
`onOpen / onClose / onClear / onSearch / onAdd / onRemove (hub-select)`	`EventEmitter`	ドロップダウンのライフサイクルおよびタグ／タイプアヘッドイベント。

テンプレート

自分好みに — 4 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`hubFormText`	リッチなヘルパーテキストコンテンツを投影します。	`<ng-template hubFormText>…</ng-template>`
`hubValidationError`	指定されたエラーキーのメッセージを上書きします。	`<ng-template hubValidationError key="min">…</ng-template>`
`hubLegend`	カスタムの fieldset legend コンテンツ。	`<ng-template hubLegend>…</ng-template>`
`ng-option-tmp (hub-select)`	カスタムのドロップダウンオプションのレンダリング（再エクスポートされた ng-select ディレクティブ）。	`<ng-template ng-option-tmp let-item="item">…</ng-template>`

CSS 変数

17 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。

共有フィールドトークン

すべてのフィールドで共有される要素：ラベル、ヘルパーテキスト、検証フィードバック、フォーカスリング。

変数	デフォルト	型	説明
`--hub-label-font-weight`	`var(--hub-ref-font-weight-medium)`	string	フィールドラベルのウェイト。
`--hub-form-feedback-color`	`var(--hub-sys-color-danger)`	color	検証エラーのテキスト色。
`--hub-form-text-color`	`var(--hub-sys-text-muted)`	color	ヘルパーテキストの色。
`--hub-form-focus-ring-color`	`var(--hub-sys-focus-ring-color)`	color	フォーカスリングの色。
`--hub-form-invalid-border-color`	`var(--hub-sys-color-danger)`	color	無効なコントロールの境界線の色。

入力

input、textarea、select トリガーで共有されるテキストコントロールのスキン。

変数	デフォルト	型	説明
`--hub-input-bg`	`var(--hub-sys-surface-page)`	color	コントロールの背景。
`--hub-input-border-color`	`var(--hub-sys-border-color-default)`	color	コントロールの境界線の色。
`--hub-input-border-radius`	`var(--hub-ref-radius-md)`	length	コントロールの境界半径。
`--hub-input-padding-y`	`0.375rem`	length	コントロールの垂直パディング。
`--hub-input-padding-x`	`0.75rem`	length	コントロールの水平パディング。
`--hub-input-focus-border-color`	`var(--hub-sys-color-primary)`	color	フォーカス時の境界線の色。

select、slider、datepicker

システムトークンに連鎖するコンポーネント固有のアクセント。

変数	デフォルト	型	説明
`--hub-select-option-selected-bg`	`var(--hub-sys-color-primary)`	color	選択されたドロップダウンオプションの背景。
`--hub-select-value-bg`	`var(--hub-sys-surface-elevated)`	color	複数選択チップの背景。
`--hub-slider-track-fill-bg`	`var(--hub-sys-color-primary)`	color	slider トラックの塗りつぶし部分。
`--hub-slider-thumb-bg`	`var(--hub-sys-color-primary)`	color	slider のつまみの色。
`--hub-daterangepicker-active-bg`	`var(--hub-sys-color-primary)`	color	選択されたカレンダー日の背景。
`--hub-daterangepicker-in-range-bg`	`color-mix(in srgb, var(--hub-sys-color-primary) 14%, transparent)`	color	範囲内のカレンダー日の背景。

スタイリングとテーマ設定

スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。