Input Base Component (Abstract Class)

Overview

The Input class is an abstract class that extends Component. It serves as the foundation for specific form controls such as Textbox, Numberbox, Datepicker, Combobox, and more.

Instead of handling low-level DOM states manually for every field, subclasses inherit a unified state tracking pipeline that handles change detection (comparing current value against the last accepted state value), edit mode lockouts, error state displays, and extensible validator arrays.

HTML Attributes

Below are the HTML attributes supported by the base Input class that configure bindings, behaviors, and validation rules:

Attribute	Type / Values	Description
`placeholder`	`String`	Helpful placeholder text displayed when the input is empty.
`binding`	`String`	The property name of the data object bound to the input when calling `setData()` or `getData()`.
`description`	`String`	Explanation or additional guidance text placed below the input field.
`character-case`	`"uppercase" \| "lowercase"`	Enforces automatic case capitalization of the text input value.
`fgta5-component`	`String`	Specifies the name of the fgta5js component class wrapping this element (e.g., `Textbox`, `Numberbox`, etc.).
`minlength`	`Number`	The minimum character length required for text validation.
`maxlength`	`Number`	The maximum character length allowed, limiting text input.
`pattern`	`String (Regex)`	A regular expression (Regex) pattern to validate the input text format.
`min`	`Number \| String`	The minimum numeric value (for `Numberbox`) or the earliest date (for `Datepicker`).
`max`	`Number \| String`	The maximum numeric value (for `Numberbox`) or the latest date (for `Datepicker`).
`validator`	`String`	Associates a custom external validation function registered in the global `window.$validators` object.

Properties

Property	Type	Access	Description
`type`	`String`	Read-only	Returns the constructor name of the active class instance (e.g., `"Textbox"`).
`value`	`String \| Number \| Boolean`	Read/Write	Gets or sets the raw element value directly from the underlying DOM element.
`disabled`	`Boolean`	Read/Write	Gets or sets whether the component is disabled. Blocks modification and logs warning if input is currently suspended.
`placeholder`	`String`	Read/Write	Gets or sets the HTML placeholder attribute of the input.
`visible`	`Boolean`	Read/Write	Gets or sets whether the wrapper container is hidden. (Toggles the CSS class `"hidden"`).
`Form`	`Form`	Read-only	Gets the bound `Form` instance if this control is registered inside a parent Form.
`InEditMode`	`Boolean`	Read-only	Returns whether the input is in editable state. Change using `setEditingMode(bool)`.
`InvalidMessages`	`Object.<string, string>`	Read-only	Returns key-value mapping of validators and their respective fail messages.
`Validators`	`Object`	Read-only	Returns the object containing all currently configured validation rules.
`Handlers`	`Object`	Read-only	Returns registered custom event/behavior handlers.

Methods

Method	Arguments	Returns	Description
`constructor(id)`	`(id: String)`	`void`	Initializes DOM structures, creates error wrappers, reads validation attributes, and registers custom base listeners.
`suspend(doSuspend, keepState)`	`(doSuspend: Boolean = true, keepState: Boolean = false)`	`void`	Suspends input control. Disables UI interactions unless `keepState` is true.
`isSuspended()`	`()`	`Boolean`	Checks if component is suspended.
`bindForm(form)`	`(form: Form)`	`void`	Tethers this component to a parent `Form` class instance.
`setEditingMode(ineditmode)`	`(ineditmode: Boolean)`	`void`	Sets editing mode. Standard inputs use this to add/remove `readonly` attributes and reset validation errors.
`setInvalidMessage(name, message)`	`(name: String, message: String)`	`void`	Configures custom messages mapping to specific validator rules.
`newData(initialvalue)`	`(initialvalue: Any)`	`void`	Seeds the input with new default content, setting it as the clean baseline.
`acceptChanges()`	`()`	`void`	Saves the current value as the new baseline state and clears the modification flags and error indicators.
`reset()`	`()`	`void`	Rolls back the input's current value to the last saved baseline state.
`isChanged()`	`()`	`Boolean`	Returns true if the current input value differs from the last saved state.
`getLastError()`	`()`	`String \| null`	Returns the last error message set on this field, or null if it is valid.
`setError(msg)`	`(msg: String \| null)`	`void`	Applies visual error boundaries on wrapper elements and appends/removes detailed helper text.
`getLastValue()`	`()`	`Any`	Returns the baseline value.
`getBindingData()`	`()`	`String \| null`	Reads the `binding` attribute from HTML input. Used to pair inputs to specific data keys.
`validate()`	`()`	`Boolean`	Performs active rules check in order of priority (required first, followed by other active validators).
`addValidator(fnName, fnParams, message)`	`(fnName: String, fnParams: Any, message: String)`	`void`	Appends a validation check structure (e.g. `minlength`, `pattern`) to the validators stack.
`removeValidator(str)`	`(str: String)`	`void`	Removes a specific rule by name.
`clearValidators()`	`()`	`void`	Clears the validation queue completely.
`readValidators()`	`()`	`void`	Reads attributes from DOM element to register validators.
`isRequired()`	`()`	`Boolean`	Checks if the field is flagged as required.
`markAsRequired(r)`	`(r: Boolean)`	`void`	Updates UI labels and internal validation status with asterisk indicator classes.
`addEventListener(evt, callback)`	`(evt: String, callback: Function)`	`void`	Binds listeners to custom component states.
`handle(name, fn)`	`(name: String, fn: Function)`	`void`	Registers custom handler callbacks.
`getErrorValidation(fnName)`	`(fnName: String)`	`Error \| null`	Runs a specific validator test against current input value. Returns error object if it fails.

Internal Functions

These module-scoped helper functions perform low-level operations directly on the state objects, avoiding standard getter/setter overrides from subclass overrides.

Function	Arguments	Description
`input_construct`	`(self: Input, id: String)`	Creates helper elements (such as container divs and hidden inputs to store the baseline value) and sets up the listener instance.
`input_setError`	`(self: Input, msg: String \| null)`	Manipulates DOM tree to inject error nodes below input wrappers and toggle the `invalid` attributes.
`input_setLastValue`	`(self: Input, v: Any)`	Stores a baseline string inside the hidden input element.
`input_getLastValue`	`(self: Input)`	Reads the baseline string from the hidden input.
`input_newData`	`(self: Input, initialvalue: Any)`	Updates value and locks changes immediately.
`input_acceptChanges`	`(self: Input)`	Synchronizes current value to last-saved element, clearing change styling.
`input_reset`	`(self: Input)`	Restores the input element to value stored inside the last-value element.
`input_isChanged`	`(self: Input)`	Compares current element value with baseline element value directly.
`input_getErrorValidation`	`(self: Input, fnName: String)`	Checks value against validation rules, applying uppercase/lowercase casting where appropriate.
`input_validate`	`(self: Input)`	Runs full validation queue, setting error messages if validation fails.
`input_readValidators`	`(self: Input)`	Extracts validation attributes like `minlength`, `maxlength`, `pattern`, `min`, `max` from DOM.
`input_markAsRequired`	`(self: Input, required: Boolean)`	Sets required attributes and registers/removes standard required validation rule.