InputBinding
Defined in: InputBinding.ts:4, InputBinding.ts:118
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
Section titled “Implements”FormBinding
Config
Section titled “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:23
Type Declaration
Section titled “Type Declaration”
optionalid?:Attrs["id"]
[Override] ID of the input element
onBlur?
Section titled “onBlur?”
optionalonBlur?:Attrs["onBlur"]
[Extend] Blur handler
onChange?
Section titled “onChange?”
optionalonChange?:Attrs["onChange"]
[Extend] Change handler
onFocus?
Section titled “onFocus?”
optionalonFocus?:Attrs["onFocus"]
[Extend] Focus handler
Union Members
Section titled “Union Members”Type Literal
Section titled “Type Literal”{ getter: () => string | null; setter: (value: string) => void; type?: StringType; valueAs?: "string"; }
getter
Section titled “getter”getter: () =>
string|null
Get the value from the model
Returns
Section titled “Returns”string | null
setter
Section titled “setter”setter: (
value:string) =>void
@action
Set the value to the model
Parameters
Section titled “Parameters”string
Returns
Section titled “Returns”void
optionaltype?:StringType
Type of form control.
When unspecified, it is deduced from the valueAs.
Default
Section titled “Default”"text" - when valueAs is undefined or "string"valueAs?
Section titled “valueAs?”
optionalvalueAs?:"string"
Value type of the input element. It determines how getter/setter should handle the value.
Type Literal
Section titled “Type Literal”{ getter: () => number | null; setter: (value: number | null) => void; type?: NumericValueType; valueAs: "number"; }
getter
Section titled “getter”getter: () =>
number|null
Get the value from the model
Returns
Section titled “Returns”number | null
setter
Section titled “setter”setter: (
value:number|null) =>void
@action
Set the value to the model
Parameters
Section titled “Parameters”number | null
Returns
Section titled “Returns”void
optionaltype?:NumericValueType
Type of form control.
When unspecified, it is deduced from the valueAs.
Default
Section titled “Default”"number" - when valueAs is "number"valueAs
Section titled “valueAs”valueAs:
"number"
Value type of the input element. It determines how getter/setter should handle the value.
Type Literal
Section titled “Type Literal”{ getter: () => string | null; setter: (value: Date | null) => void; type?: DateValueType; valueAs: "date"; }
getter
Section titled “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 |
Returns
Section titled “Returns”string | null
Example
Section titled “Example”date.toISOString().split("T")[0]setter
Section titled “setter”setter: (
value:Date|null) =>void
@action
Set the value to the model
Parameters
Section titled “Parameters”Date | null
Returns
Section titled “Returns”void
optionaltype?:DateValueType
Type of form control.
When unspecified, it is deduced from the valueAs.
Default
Section titled “Default”"date" - when valueAs is "date"valueAs
Section titled “valueAs”valueAs:
"date"
Value type of the input element. It determines how getter/setter should handle the value.
Constructor
Section titled “Constructor”new InputBinding(
field,config):InputBinding
Defined in: InputBinding.ts:119
Parameters
Section titled “Parameters”FormField
config
Section titled “config”Returns
Section titled “Returns”InputBinding
Members
Section titled “Members”config
Section titled “config”config:
InputBinding.Config
Defined in: InputBinding.ts:121
Implementation of
Section titled “Implementation of”FormBinding.config
onBlur
Section titled “onBlur”onBlur:
FocusEventHandler<HTMLInputElement>
Defined in: InputBinding.ts:162
onChange
Section titled “onChange”onChange:
ChangeEventHandler<HTMLInputElement,HTMLInputElement>
Defined in: InputBinding.ts:144
@action
onFocus
Section titled “onFocus”onFocus:
FocusEventHandler<HTMLInputElement>
Defined in: InputBinding.ts:167
errorMessages
Section titled “errorMessages”Get Signature
Section titled “Get Signature”get errorMessages():
string|null
Defined in: InputBinding.ts:173
Returns
Section titled “Returns”string | null
@computed
Get Signature
Section titled “Get Signature”get props():
object
Defined in: InputBinding.ts:178
Binding properties which passed to the view component
Returns
Section titled “Returns”object
aria-errormessage
Section titled “aria-errormessage”aria-errormessage:
string|undefined
aria-invalid
Section titled “aria-invalid”aria-invalid:
boolean|undefined
id:
string
onBlur
Section titled “onBlur”onBlur:
FocusEventHandler<HTMLInputElement>
onChange
Section titled “onChange”onChange:
ChangeEventHandler<HTMLInputElement,HTMLInputElement>
onFocus
Section titled “onFocus”onFocus:
FocusEventHandler<HTMLInputElement>
type:
HTMLInputTypeAttribute
value:
string|number| readonlystring[]
Implementation of
Section titled “Implementation of”FormBinding.props
Get Signature
Section titled “Get Signature”get type():
HTMLInputTypeAttribute
Defined in: InputBinding.ts:130
Returns
Section titled “Returns”HTMLInputTypeAttribute
Get Signature
Section titled “Get Signature”get value():
string|number| readonlystring[]
Defined in: InputBinding.ts:126
Returns
Section titled “Returns”string | number | readonly string[]