Angular フォームライブラリ | ng-hub-ui-forms

アクセシブルな Angular フォームフィールド（input、textarea、slider、select、datepicker）。コントロール／グループ／フォーム単位のエラーを自動表示し、リアクティブフォームと CSS 変数に対応します。

概要

チームがこのライブラリを探す理由

アクセシブルなフォームフィールドにバリデーションエラーの自動表示、フォークした ng-select、ゼロから構築した datepicker、ランタイムでの CSS 変数テーマが必要なとき、この Angular フォームライブラリを使ってください。Bootstrap は不要です。

インストール

npm install ng-hub-ui-forms

ジャンプ

最適な用途

  • 登録・チェックアウトフォーム
  • 設定ページ
  • フィルターと検索
  • 管理ダッシュボード

について forms

ng-hub-ui-forms はすべてのフォームフィールドを単一の規約に統一します。リアクティブフォームでバインドするだけで、コントロール・グループ・フォームの各レベルに対応するエラーが自動的に表示されます。フィールドは standalone・OnPush で Signals ネイティブ。select はメンテナンスされた ng-select のフォークを hub トークンでテーマ化し、datepicker はネイティブの Date と Angular CDK のオーバーレイ上に構築されています。すべては正規の --hub-* CSS 変数でテーマ化され、ランタイムのダークモードに対応します。

機能ガイド

テキストフィールド

リアクティブフォームのバインディングと、配線不要の自動エラー表示を備えた `hub-input` フィールドです。text、email、password、number、counter に加え、フローティングラベルと input-group のアドオンに対応します。

サンプル:
テキストフィールド & 自動エラー

テキストフィールド & 自動エラー

We'll never share it.
数値、カウンター、カラー、スイッチ、チェックボックス

数値、カウンター、カラー、スイッチ、チェックボックス

入力グループ、ファイル & フローティングラベル

入力グループ、ファイル & フローティングラベル

$.00
@
No file selected
パターンマスク（カード、IBAN、電話、日付）

パターンマスク（カード、IBAN、電話、日付）

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

ワンタイムコード（OTP）入力

ワンタイムコード（OTP）入力

Paste the 6-digit code we sent you.

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

複数行＆範囲

文字カウンター付きの自動拡張テキストエリアと、単一／デュアルサムの範囲スライダーです。

サンプル:
カウンター & 自動リサイズ付きテキストエリア

カウンター & 自動リサイズ付きテキストエリア

0 / 160
Grows as you type.
Slider & デュアルサムレンジ

Slider & デュアルサムレンジ

Dual-thumb range.

選択

hub トークンでテーマ化されたフォーク版 ng-select エンジンに加え、同じ値に対して独自の UI をレンダリングする button、radio、checkbox の各フォーマットを提供します。

サンプル:
選択 & 複数選択

選択 & 複数選択

Select a country
Pick some tags
グループ化オプション

グループ化オプション

Select a city
タイプアヘッド検索

タイプアヘッド検索

Type to filter…
Search and add…
オプション/ラベルのカスタムテンプレート

オプション/ラベルのカスタムテンプレート

Pick a teammate
ボタン、ラジオ & チェックボックス形式

ボタン、ラジオ & チェックボックス形式

日付選択

ネイティブの Date と CDK Overlay 上にゼロから構築した日付／範囲ピッカーで、境界値、キーボードナビゲーション、完全な i18n を備えています。

サンプル:
Datepicker & 範囲

Datepicker & 範囲

No future dates.
Date range.

コンテナ＆バリデーション

`form[hubForm]`、`hub-fieldset`、`hub-legend` は、フィールドがコントロールエラーを表示するのと同じ方法で、グループレベルおよびフォームレベル（クロスフィールド）のエラーを自動的に表示します。

サンプル:
コンテナ & フィールド間エラー

コンテナ & フィールド間エラー

Password

主な機能

最近の変更

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.

関連ライブラリ

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