<kbq-form-field> - это компонент, который используется для создания форм и полей ввода с поддержкой стилизации и дополнительных функций.

Следующие компоненты предназначены для использования внутри <kbq-form-field>:

• Autocomplete
• Input
• Select
• Tag autocomplete
• Tag input
• Textarea
• Timepicker
• Timezone
• Tree select

Для создания горизонтальной формы необходимо добавить horizontal атрибут к <kbq-form-field> компоненту.

<kbq-hint> — это компонент, который используется для добавления подсказок к полям формы внутри <kbq-form-field> компонента. Подсказки могут быть полезны для предоставления дополнительной информации о том, как заполнить поле, какие данные ожидаются или для отображения дополнительных инструкций.

<kbq-error> — это компонент, который используется для отображения сообщений об ошибках валидации поля формы внутри <kbq-form-field> компонента. Ошибки изначально скрыты и будут отображаться только для невалидных полей формы после пользовательского взаимодействия или в момент отправки формы.

import { kbqDisableLegacyValidationDirectiveProvider } from '@koobiq/components/core';

@NgModule({
    providers: [kbqDisableLegacyValidationDirectiveProvider()]
})

По умолчанию подсветка и сообщения об ошибках отображаются для невалидных полей после взаимодействия пользователя (коснулся или отправил форму) с элементом формы. Это поведение можно переопределить при помощи ErrorStateMatcher, который предоставляет возможность гибко настраивать логику подсветки и отображения ошибок валидации, что позволяет адаптировать поведение полей ввода под конкретные требования приложения.

Можно использовать один из встроенных ErrorStateMatcher, либо написать свою собственную реализацию:

/**
 * Подсветит и отобразит ошибку для невалидного поля после отправки формы
 * Копия ShowOnFormSubmitErrorStateMatcher: https://github.com/koobiq/angular-components/blob/main/packages/components/core/error/error-state-matcher.ts
 */
class CustomErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean {
        return !!(control?.invalid && form?.submitted);
    }
}

Переопределение

Для определенного поля, при помощи errorStateMatcher атрибута:

Для всех полей, при помощи ErrorStateMatcher токена:

Подробное описание обоих подходов и паттернов для конкретных компонентов (список тегов, загрузка файлов) — в руководстве Валидация.

<kbq-cleaner /> - это компонент, который добавляет кнопку очистки для заполненного поля формы внутри <kbq-form-field> компонента.

kbqPrefix и kbqSuffix - это директивы, которые позволяют добавлять пользовательские элементы до и после поля формы внутри <kbq-form-field> компонента. Эти директивы полезны для добавления иконок, текста, кнопок и других элементов, которые должны быть расположены рядом с полем формы.

В полях ввода текста при фокусе всегда отображается синяя рамка, независимо от способа активации (мышь, клавиатура или касание). Для элементов формы с выпадающим списком (таких как: select, timezone и tree select) рамка фокуса показывается только при навигации с клавиатуры (при помощи клавиши Tab) и скрывается при открытии выпадающего списка.

Для определенного поля, при помощи noBorders атрибута:

Для всех полей, при помощи KBQ_FORM_FIELD_DEFAULT_OPTIONS токена:

import { kbqFormFieldDefaultOptionsProvider } from '@koobiq/components/form-field';

@NgModule({
    providers: [kbqFormFieldDefaultOptionsProvider({ noBorders: true })]
})

<kbq-password-toggle> - это компонент, который добавляет кнопку "Показать пароль" для заполненного поля <input kbqInputPassword /> внутри <kbq-form-field> компонента.

<kbq-password-hint> - это компонент, который используется для добавления подсказок к полю <input kbqInputPassword /> внутри <kbq-form-field> компонента.

В примере используется PasswordValidators - это набор статических методов для валидации пароля.

Эта ошибка возникает, когда <kbq-form-field> не содержит поле формы, например: <input kbqInput /> или его импорт KbqInputModule.

Эта ошибка возникает, когда <kbq-password-toggle> не может найти поле <input kbqInputPassword /> или его импорт KbqInputModule.

Эта ошибка возникает, когда <kbq-stepper> не может найти поле <input kbqNumberInput /> или его импорт KbqInputModule.