upp-input-select

A text field with an optional dropdown of string options. Implements ControlValueAccessor so it can be typed freely or filled by picking a listed value.

When to Use

Use upp-input-select when the operator may type a custom value or choose from known options (for example OS printer names). Prefer upp-input when there is no option list, and upp-select when the value must come only from a closed set.

Demo

Source Code

HTML

<form [formGroup]="form">
    <upp-input-select
        formControlName="device"
        title="Printer device"
        placeholder="Device name"
        [options]="printers"
        [kiosk]="false"
        [errornfo]="errorMessages"
    ></upp-input-select>
</form>

TypeScript

form = new FormGroup({
    device: new FormControl<string | null>(null, [Validators.required]),
});
printers = ['POS80', 'POS-80C', 'CommandViewer'];
errorMessages = { required: 'This field is required' };

API Reference

Input / Output	Type	Description
options	string[]	Dropdown values. Empty list hides the expand control.
title	string	Floating caption above the field.
placeholder	string	Placeholder for the text field.
formControlName	string	Reactive forms binding.
disabled / readonly	boolean	Disable or lock typing.
kiosk	boolean	Kiosk keyboard mode for the inner text field.
errornfo	Record<string, string>	Validation messages by error key.
Changed	EventEmitter<string | null>	Emits on type or pick.
Focus	EventEmitter<void>	Emits when the text field focuses.