Angular 表单库 | ng-hub-ui-forms

无障碍的 Angular 表单字段(input、textarea、滑块、select、日期选择器),在控件、组和表单级别自动显示校验错误,支持响应式表单和 CSS 变量。

概览

团队为何搜索这个库

当你需要无障碍的表单字段,并希望自动显示校验错误、使用 fork 版 ng-select、从零构建的日期选择器以及运行时 CSS 变量主题(无需 Bootstrap)时,请使用这个 Angular 表单库。

安装

npm install ng-hub-ui-forms

跳转到

适用于

  • 注册和结账表单
  • 设置页面
  • 筛选与搜索
  • 管理后台仪表盘

关于 forms

ng-hub-ui-forms 将每个表单字段统一在同一套契约之下:用响应式表单绑定它,对应的错误就会在控件、组和表单级别自动显示。所有字段都是 standalone、OnPush 且原生支持 Signals;select 是一个持续维护的 ng-select fork,并采用 hub token 进行主题化;日期选择器基于原生 Date 和 Angular CDK overlay 构建。一切都通过规范的 --hub-* CSS 变量进行主题化,并支持运行时暗色模式。

功能指南

文本字段

`hub-input` 字段支持响应式表单绑定和自动、零接线的错误显示。涵盖文本、邮箱、密码、数字和计数器,外加浮动标签和输入组附加元素。

示例:
文本字段与自动错误提示

文本字段与自动错误提示

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。

示例:
单选与多选

单选与多选

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.