Справочник API

Вот полный контракт forms: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте forms с помощью 14 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`formControlName / [formControl]`	`string \| FormControl`	—	Привязывает любое поле к реактивному контролу. Ошибки отображаются автоматически, когда контрол был затронут (touched) и недействителен.
`label`	`string`	`''`	Текст метки поля.
`labelType`	`'stacked' \| 'floating' \| 'horizontal'`	`'stacked'`	Расположение метки.
`placeholder`	`string`	`''`	Текст placeholder.
`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`	Ползунок диапазона с двумя бегунками; значение становится кортежем [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`	События жизненного цикла выпадающего списка и события tag/typeahead.

Шаблоны

Сделайте его своим — 4 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`hubFormText`	Проецирование насыщенного содержимого вспомогательного текста.	`<ng-template hubFormText>…</ng-template>`
`hubValidationError`	Переопределение сообщения для заданного ключа ошибки.	`<ng-template hubValidationError key="min">…</ng-template>`
`hubLegend`	Пользовательское содержимое легенды fieldset.	`<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

Оформление текстового элемента управления, общее для 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	Фон дня календаря в диапазоне.

Стилизация и тематизация

Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.