import { KbqInputModule } from '@koobiq/components/input';

KbqInput

directiveCopy link to KbqInput
@Directive({
selector: 'input[kbqInput],input[kbqNumberInput]',
exportAs: 'kbqInput'
})
class KbqInput implements KbqFormFieldControl<any>, CanUpdateErrorState {
readonly errorStateMatcher = input<ErrorStateMatcher>();
type = input<string | undefined>();
ngControl: NgControl | null;
numberInput: KbqNumberInput | null;
parentForm: NgForm | null;
parentFormGroup: FormGroupDirective | null;
defaultErrorStateMatcher: ErrorStateMatcher;
readonly errorState: Signal<boolean>;
updateErrorState(): void;
focus(): void;
onBlur(): void;
focusChanged(isFocused: boolean): void;
}
errorStateMatcherinputCopy link to errorStateMatcherErrorStateMatcher

An object used to control when error messages are shown.

typeinputCopy link to typestring | undefined

Input type of the element.

errorStateCopy link to errorStateSignal<boolean>

Whether the component is in an error state.

focus()Copy link to focus()void

Focuses the input.

focusChanged()Copy link to focusChanged()void

Callback for the cases where the focused state of the input changes.

KbqInputMono

directiveCopy link to KbqInputMono
@Directive({
selector: 'input[kbqInputMonospace]',
exportAs: 'kbqInputMonospace, KbqInputMonospace'
})
class KbqInputMono {}

KbqInputPassword

directiveCopy link to KbqInputPassword
@Directive({
selector: 'input[kbqInputPassword]',
exportAs: 'kbqInputPassword'
})
class KbqInputPassword implements KbqFormFieldControl<any>, CanUpdateErrorState {
readonly errorStateMatcher = input<ErrorStateMatcher>();
ngControl: NgControl | null;
parentForm: NgForm | null;
parentFormGroup: FormGroupDirective | null;
defaultErrorStateMatcher: ErrorStateMatcher;
readonly errorState: Signal<boolean>;
readonly elementType: Signal<"text" | "password">;
updateErrorState(): void;
toggleType(): void;
focus(): void;
onBlur(): void;
focusChanged(isFocused: boolean): void;
}
errorStateMatcherinputCopy link to errorStateMatcherErrorStateMatcher

An object used to control when error messages are shown.

errorStateCopy link to errorStateSignal<boolean>

Whether the component is in an error state.

elementTypeCopy link to elementTypeSignal<"text" | "password">

Type of the native input: password while the password is hidden, text while it is shown.

toggleType()Copy link to toggleType()void

Toggles the native input type between password and text.

focus()Copy link to focus()void

Focuses the input.

focusChanged()Copy link to focusChanged()void

Callback for the cases where the focused state of the input changes.

KbqMaxValidator

directiveCopy link to KbqMaxValidator

A directive which installs the KbqMaxValidator for any formControlName, formControl, or control with ngModel that also has a max attribute.

@Directive({
selector: '[max][formControlName],[max][formControl],[max][ngModel]'
})
class KbqMaxValidator implements Validator {
readonly max = input<number>();
validate(c: AbstractControl): ValidationErrors | null;
registerOnValidatorChange(fn: () => void): void;
}
maxinputCopy link to maxnumber

Upper bound installed as Validators.max. A non-numeric bound reads back as NaN.

KbqMinValidator

directiveCopy link to KbqMinValidator

A directive which installs the KbqMinValidator for any formControlName, formControl, or control with ngModel that also has a min attribute.

@Directive({
selector: '[min][formControlName],[min][formControl],[min][ngModel]'
})
class KbqMinValidator implements Validator {
readonly min = input<number>();
validate(c: AbstractControl): ValidationErrors | null;
registerOnValidatorChange(fn: () => void): void;
}
mininputCopy link to minnumber

Lower bound installed as Validators.min. A non-numeric bound reads back as NaN.

KbqNumberInput

directiveCopy link to KbqNumberInput
@Directive({
selector: 'input[kbqNumberInput]',
exportAs: 'kbqNumberInput, kbqNumericalInput'
})
class KbqNumberInput implements ControlValueAccessor {
readonly integer = input<boolean>(false);
readonly bigStep = input<number>(BIG_STEP);
readonly step = input<number>(SMALL_STEP);
readonly min = input<number>(-Infinity);
readonly max = input<number>(Infinity);
readonly withThousandSeparator = input<boolean>(true);
readonly startFormattingFrom = input<number>();
value = input<number | null | undefined>();
disabled = input<boolean | undefined>();
readonly valueChange: Subject<number | null>;
readonly disabledChange: Subject<boolean>;
readonly stateChanges: Subject<void>;
focused: boolean;
get nativeElement(): HTMLInputElement;
get viewValue(): string;
get valueAsNumber(): number | null;
onContainerClick(): void;
focus(): void;
focusChanged(isFocused: boolean): void;
onKeyDown(event: KeyboardEvent): void;
onInput(event: InputEvent): void;
onPaste(event: ClipboardEvent): void;
stepUp(step: number): void;
stepDown(step: number): void;
}
integerinputCopy link to integerboolean

Allows input and pasting of integers only.

bigStepinputCopy link to bigStepnumber

Step applied when Shift is held.

stepinputCopy link to stepnumber

Step applied by the arrow keys and by kbq-stepper.

mininputCopy link to minnumber

Lower bound the value is clamped to when stepping.

maxinputCopy link to maxnumber

Upper bound the value is clamped to when stepping.

startFormattingFrominputCopy link to startFormattingFromnumber

Adds the thousand separator only from this power of ten. For example, 4 keeps 1234 un-grouped and groups 12345. Defaults to the active locale's own value.

valueinputCopy link to valuenumber | null | undefined

The numeric value of the field, bound with [value] or written by a form control.

disabledinputCopy link to disabledboolean | undefined

Whether the field is disabled, bound with [disabled] or set by a form control.

localeOverridesinputCopy link to localeOverridesKbqPartialLocaleData | undefined

Localized strings for this element and its subtree, keyed by locale section. Every key is optional at every depth.

valueChangeCopy link to valueChangeSubject<number | null>

Emits when the value changes (either due to user input or programmatic change).

disabledChangeCopy link to disabledChangeSubject<boolean>

Emits when the disabled state has changed

stateChangesCopy link to stateChangesSubject<void>

Emits whenever the focused or disabled state of the directive changes.

valueAsNumberCopy link to valueAsNumbernumber | null

Locale-aware numeric read of the field: parsed straight from nativeElement.value, so "1 234,5" reads back as 1234.5 where the native valueAsNumber of a type="text" input reports NaN. Computed on every read rather than cached off the committed model, so it never lags behind a keystroke the way value can while onInput's reformat is still pending in its setTimeout(0) — safe to read from a consumer's own (input) handler. An in-progress "-" reads as null, same as an empty field, rather than the last committed number.

KBQ_INPUT_DEFAULT_LOCALE_CONFIGURATION

constCopy link to KBQ_INPUT_DEFAULT_LOCALE_CONFIGURATION

Default configuration of KbqNumberInput: the whole input locale section, of which the number input reads number.

const KBQ_INPUT_DEFAULT_LOCALE_CONFIGURATION: KbqInputLocaleConfiguration;

KBQ_INPUT_LOCALE_CONFIGURATION

constCopy link to KBQ_INPUT_LOCALE_CONFIGURATION

Injection token for providing the default configuration of KbqNumberInput.

const KBQ_INPUT_LOCALE_CONFIGURATION: InjectionToken<KbqInputLocaleConfiguration>;

KBQ_INPUT_NUMBER_DEFAULT_CONFIGURATION

constDeprecatedCopy link to KBQ_INPUT_NUMBER_DEFAULT_CONFIGURATION

Use KBQ_INPUT_DEFAULT_LOCALE_CONFIGURATION, which carries the whole input locale section rather than just its number slice. Will be removed in 22.0.0.

const KBQ_INPUT_NUMBER_DEFAULT_CONFIGURATION: { groupSeparator: string[]; fractionSeparator: string; startFormattingFrom: number; viewGroupSeparator: string; };

KBQ_INPUT_VALUE_ACCESSOR

constCopy link to KBQ_INPUT_VALUE_ACCESSOR
const KBQ_INPUT_VALUE_ACCESSOR: InjectionToken<{ value: any }>;

KBQ_MAX_VALIDATOR

constCopy link to KBQ_MAX_VALIDATOR
const KBQ_MAX_VALIDATOR: Provider;

KBQ_MIN_VALIDATOR

constCopy link to KBQ_MIN_VALIDATOR
const KBQ_MIN_VALIDATOR: Provider;

KBQ_NUMBER_INPUT_VALUE_ACCESSOR

constCopy link to KBQ_NUMBER_INPUT_VALUE_ACCESSOR
const KBQ_NUMBER_INPUT_VALUE_ACCESSOR: any;

kbqInputLocaleConfigurationProvider

constCopy link to kbqInputLocaleConfigurationProvider

Utility provider for KBQ_INPUT_LOCALE_CONFIGURATION. Only the values you pass are overridden; the rest keep following the active locale.

const kbqInputLocaleConfigurationProvider: (
configuration: KbqDeepPartial<KbqInputLocaleConfiguration>
) => Provider;
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.