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

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

交互式示例

探索实时示例，了解该库在常见 Angular 用例中的表现。

文本字段

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

文本字段与自动错误提示

We'll never share it.

密码字段——显示切换、强度计与自动填充

While typing with Caps Lock on, a warning hint appears automatically under the field.

数字、计数器、颜色、开关、复选框

输入组、文件与浮动标签

$.00
@
No file selected
Deprecated since 22.6.0 — use <hub-file-input> instead.

附着于字段的图标、按钮与字段

€
Pick one
From
€
a month
a week
Unassigned
Markdown

模式掩码（银行卡、IBAN、电话、日期）

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

一次性验证码（OTP）输入

Paste the 6-digit code we sent you.

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

带图标和输入提示的搜索框

Debounced term (after 300 ms): —

  • Angular
  • React
  • Vue
  • Svelte
  • Solid
  • Qwik
  • Preact
  • Lit

多行与范围

带字符计数器的自动增高文本域，以及单滑块 / 双滑块范围滑条。

带计数器和自动调整高度的文本域

0 / 160
Grows as you type.

Slider 与双滑块范围

Dual-thumb range.

滑块样式（渐变与紧凑）

选择

经过 hub 令牌主题化的分叉版 ng-select 引擎，外加按钮、单选和复选格式，它们针对同一个值渲染各自的 UI。

分段控件

Single-select — the selected pill slides between options.
Multiple-select — the value is an array.

view: list · perks: wifi

Segmented：自定义选项模板

Single-select — the template renders an icon, the label and a check on the selected segment.
Multiple-select — the same template contract; index comes from the context.

transport: bike · channels: email

单选与多选

Select a country
Pick some tags
Angular
Signals

分组选项

Select a city

输入即搜索

Type to filter…
Search and add…

Select：异步 typeahead

Type at least 2 characters…
Async typeahead — each term is pushed to the Subject and the results come back from the 'server'.
Pick or type a new tag…
addTag creates an item from the search term when nothing matches.

city: — · tags: —

自定义选项与标签模板

Pick a teammate

按钮、单选与复选框格式

模态框内的下拉选择

附加标签与附加操作

€
Pick a tier
/ month
Static addons at both ends, like an input group.
https://api.
Pick a region
A run of addons on one side reads as a single piece.
Pick a product
An action attached to the edge — it acts on whatever is selected.
Pick a plan
EUR
Addon and action together — the action is always the outermost.

日期选择

基于原生 Date 和 CDK Overlay 从零构建的日期 / 范围选择器，支持边界限制、键盘导航和完整 i18n。

时间选择器 — 一天中的时刻

Required.
Between 08:00 and 22:00, in quarters.
Fed '09:30:00' — the seconds are trimmed instead of showing nothing.
FromUTC
Emitted value{ "opensAt": null, "closesAt": "09:00", "fromApi": "09:30:00", "shiftFrom": "09:00", "shiftTo": "18:00" } opensAt is required

Datepicker 与范围选择

No future dates.
Pick a start, then sweep to preview.

带时间的日期选择器

Each end carries its own time.
A single instant, minute precision.
Emitted value{ "window": null, "reminder": null }

粒度：从年到秒

 2026
2026-09
2026-09-01
2026-09-01T09:00:00+02:00
2026-09-01T09:30:00+02:00
2026-09-01T09:30:45+02:00

输入、值与显示格式

—
—
Anything the enum does not cover — here, Unix seconds.
—
An Angular date pattern. The stored value is unaffected.
—
Seeded with '15/06/2026', which no built-in rule would read.
string — 15/06/2026

单日时间范围

One day, two times — never crosses midnight.
Two instants — the ends may fall on different days.
Emitted value{ "meeting": null, "stay": null } meeting spans — · stay spans —

文件上传

支持拖放、剪贴板粘贴、类型与大小限制、预览，以及可选的单文件上传进度的文件字段。

单个文件与校验

Drag the file onto the box, paste it, or browse for it.

Selected: —

拖放、限制与预览

上传进度、取消与重试

Uploads start automatically. Rename a file to include “fail” to see the retry button.

容器与校验

`form[hubForm]`、`hub-fieldset` 和 `hub-legend` 会自动呈现组级和表单级（跨字段）错误——其方式与字段呈现控件错误的方式相同。

容器与跨字段错误

Password

从右到左

在 `dir="rtl"` 下每个字段都会镜像。大部分是免费的——基础组件都用逻辑 CSS 属性编写——但滑块、开关和分段控件需要单独处理，因为它们的几何只有一半来自 CSS。

从右到左 — 所有字段镜像

Barcelona
The calendar button changes side.