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` 字段支持响应式表单绑定和自动、零接线的错误显示。涵盖文本、邮箱、密码、数字和计数器,外加浮动标签和输入组附加元素。
示例:
文本字段与自动错误提示
文本字段与自动错误提示
数字、计数器、颜色、开关、复选框
数字、计数器、颜色、开关、复选框
输入组、文件与浮动标签
输入组、文件与浮动标签
模式掩码(银行卡、IBAN、电话、日期)
模式掩码(银行卡、IBAN、电话、日期)
一次性验证码(OTP)输入
一次性验证码(OTP)输入
多行与范围
带字符计数器的自动增高文本域,以及单滑块 / 双滑块范围滑条。
示例:
带计数器和自动调整高度的文本域
带计数器和自动调整高度的文本域
Slider 与双滑块范围
Slider 与双滑块范围
选择
经过 hub 令牌主题化的分叉版 ng-select 引擎,外加按钮、单选和复选格式,它们针对同一个值渲染各自的 UI。
示例:
单选与多选
单选与多选
分组选项
分组选项
输入即搜索
输入即搜索
自定义选项与标签模板
自定义选项与标签模板
按钮、单选与复选框格式
按钮、单选与复选框格式
日期选择
基于原生 Date 和 CDK Overlay 从零构建的日期 / 范围选择器,支持边界限制、键盘导航和完整 i18n。
示例:
Datepicker 与范围选择
Datepicker 与范围选择
容器与校验
`form[hubForm]`、`hub-fieldset` 和 `hub-legend` 会自动呈现组级和表单级(跨字段)错误——其方式与字段呈现控件错误的方式相同。
示例:
容器与跨字段错误
容器与跨字段错误
核心特性
最近更改
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.