<kbq-form-field> is a component used to create forms and input fields with support for styling and additional features.

The following components are intended to work inside the <kbq-form-field> component:

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

To create a horizontal form, add the horizontal attribute to the <kbq-form-field> component.

<kbq-hint> is a component used to add hints to form fields inside the <kbq-form-field> component. Hints can be useful for providing additional information on how to fill out the field, what data is expected, or for displaying additional instructions.

<kbq-error> is a component used to display validation error messages for form fields inside the <kbq-form-field> component. Errors are initially hidden and will be displayed only for invalid form fields after user interaction or form submission.

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

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

By default, error highlighting and messages are displayed for invalid fields after user interaction (touched or form submitted) with the form element. This behavior can be overridden using ErrorStateMatcher, which provides the ability to flexibly configure the logic for highlighting and displaying validation errors, allowing you to adapt the behavior of input fields to the specific requirements of the application.

You can use one of the built-in ErrorStateMatcher, or write your own implementation:

/**
 * Highlights and displays an error for an invalid field after form submission
 * Copy of 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);
    }
}

Override

For a specific field, using the errorStateMatcher attribute:

For all fields, using the ErrorStateMatcher token:

For a full explanation of both approaches, built-in matchers, and component-specific patterns (tag list, file upload), see the Validation guide.

<kbq-cleaner /> is a component that adds a clear button for filled form fields inside the <kbq-form-field> component.

kbqPrefix and kbqSuffix are directives that allow adding custom elements before and after the form field inside the <kbq-form-field> component. These directives are useful for adding icons, text, buttons, and other elements that should be placed next to the form field.

In text input fields, a blue border is always displayed when focused, regardless of the activation method (mouse, keyboard, or touch). For form elements with dropdown lists (such as: select, timezone, and tree select), the focus border is shown only during keyboard navigation (using the Tab key) and is hidden when the dropdown list is opened.

For a specific field, using the noBorders attribute:

For all fields, using the KBQ_FORM_FIELD_DEFAULT_OPTIONS token:

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

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

<kbq-password-toggle> is a component that adds a "Show password" button for filled <input kbqInputPassword /> fields inside the <kbq-form-field> component.

<kbq-password-hint> is a component used to add hints to the <input kbqInputPassword /> field inside the <kbq-form-field> component.

The example uses PasswordValidators - a set of static methods for password validation.

This error occurs when <kbq-form-field> does not contain a form field, such as <input kbqInput /> or its import KbqInputModule.

This error occurs when <kbq-password-toggle> cannot find the <input kbqInputPassword /> field or its import KbqInputModule.

This error occurs when <kbq-stepper> cannot find the <input kbqNumberInput /> field or its import KbqInputModule.