InputBinding

Defined in: InputBinding.ts:5, InputBinding.ts:128

Binding for text input elements

Key features:

• Supports text, number, and date inputs
• Handles intermediate values during typing
• Auto-finalizes values on blur
• Manages error states and ARIA attributes

Implements

• FormBinding

Types

Config

Config = object & ({ getter: () => string | null; setter: (value: string) => void; type?: StringType; valueAs?: "string"; } | { getter: () => number | null; setter: (value: number | null) => void; type?: NumericValueType; valueAs: "number"; } | { getter: () => string | null; setter: (value: Date | null) => void; type?: DateValueType; valueAs: "date"; })

Defined in: InputBinding.ts:24

Type Declaration

aria-describedby?

optional aria-describedby?: Attrs["aria-describedby"]

[Extend] IDs of the elements describing the input; the ID of the error text is added while errors are reported

id?

optional id?: Attrs["id"]

[Override] ID of the input element

onBlur?

optional onBlur?: Attrs["onBlur"]

[Extend] Blur handler

onChange?

optional onChange?: Attrs["onChange"]

[Extend] Change handler

onFocus?

optional onFocus?: Attrs["onFocus"]

[Extend] Focus handler

Union Members

Type Literal

{ getter: () => string | null; setter: (value: string) => void; type?: StringType; valueAs?: "string"; }

getter

getter: () => string | null

Get the value from the model

Returns

string | null

setter

setter: (value: string) => void

@action

Set the value to the model

Parameters

value

string

Returns

void

type?

optional type?: StringType

Type of form control.

When unspecified, it is deduced from the valueAs.

Default

"text" - when valueAs is undefined or "string"

valueAs?

optional valueAs?: "string"

Value type of the input element. It determines how getter/setter should handle the value.

---

Type Literal

{ getter: () => number | null; setter: (value: number | null) => void; type?: NumericValueType; valueAs: "number"; }

getter

getter: () => number | null

Get the value from the model

Returns

number | null

setter

setter: (value: number | null) => void

@action

Set the value to the model

Parameters

value

number | null

Returns

void

type?

optional type?: NumericValueType

Type of form control.

When unspecified, it is deduced from the valueAs.

Default

"number" - when valueAs is "number"

valueAs

valueAs: "number"

Value type of the input element. It determines how getter/setter should handle the value.

---

Type Literal

{ getter: () => string | null; setter: (value: Date | null) => void; type?: DateValueType; valueAs: "date"; }

getter

getter: () => string | null

Get the value from the model

String representation of the date. As Date instance has no distinction between date and datetime, it's developers' responsibility to format the date correctly.

type attr	Expected format	Example
date	YYYY-MM-DD	2024-12-31
datetime-local	YYYY-MM-DDTHH:mm	2024-12-31T23:59
time	HH:mm or HH:mm:ss	23:59 or 23:59:59
week	YYYY-Www	2024-W52
month	YYYY-MM	2024-12

The Date given to the setter is the element's wall clock read as UTC, not the instant in the browser's timezone: date is midnight UTC, time is on 1970-01-01 UTC, and datetime-local is the entered date-time as UTC. toISOString() thus formats it back to the same wall clock, which the getter slices down to the format of the type.

Returns

string | null

Example

date.toISOString().split("T")[0]

setter

setter: (value: Date | null) => void

@action

Set the value to the model

Parameters

value

Date | null

Returns

void

type?

optional type?: DateValueType

Type of form control.

When unspecified, it is deduced from the valueAs.

Default

"date" - when valueAs is "date"

valueAs

valueAs: "date"

Value type of the input element. It determines how getter/setter should handle the value.

Constructor

new InputBinding(field, config): InputBinding

Defined in: InputBinding.ts:129

Parameters

field

FormField

config

InputBinding.Config

Returns

InputBinding

Members

config

config: InputBinding.Config

Defined in: InputBinding.ts:131

Implementation of

FormBinding.config

---

onBlur

onBlur: FocusEventHandler<HTMLInputElement>

Defined in: InputBinding.ts:180

---

onChange

onChange: ChangeEventHandler<HTMLInputElement, HTMLInputElement>

Defined in: InputBinding.ts:154

@action

---

onFocus

onFocus: FocusEventHandler<HTMLInputElement>

Defined in: InputBinding.ts:185

---

errorMessages

Get Signature

get errorMessages(): string | null

Defined in: InputBinding.ts:191

Returns

string | null

@computed

---

props

Get Signature

get props(): object

Defined in: InputBinding.ts:196

Binding properties which passed to the view component

Returns

object

aria-describedby

aria-describedby: string | undefined

aria-errormessage

aria-errormessage: string | undefined

aria-invalid

aria-invalid: boolean | undefined

id

id: string

onBlur

onBlur: FocusEventHandler<HTMLInputElement>

onChange

onChange: ChangeEventHandler<HTMLInputElement, HTMLInputElement>

onFocus

onFocus: FocusEventHandler<HTMLInputElement>

type

type: HTMLInputTypeAttribute

value

value: string | number | readonly string[]

Implementation of

FormBinding.props

---

type

Get Signature

get type(): HTMLInputTypeAttribute

Defined in: InputBinding.ts:140

Returns

HTMLInputTypeAttribute

---

value

Get Signature

get value(): string | number | readonly string[]

Defined in: InputBinding.ts:136

Returns

string | number | readonly string[]