FormField

Source: Form.ts:120

Modifiers: abstract

Abstract form field component

Remarks

Base class for all form field components. Provides:

• Value management
• Validation support
• Touch/dirty state tracking
• Error display

Type Parameters

• P extends FormFieldProps = FormFieldProps — Props type (extends FormFieldProps)
• V = unknown — Value type

Example

class TextField extends FormField<TextFieldProps, string> {
  protected parseValue(rawValue: unknown): string {
    return String(rawValue ?? '')
  }

  public render(): string {
    return `<input type="text" value="${this.getValue()}" />`
  }
}

Constructors

new FormField< P extends FormFieldProps = FormFieldProps, V = unknown, >( props: P, ): FormField<P, V>

Parameters

• props (P) — Initial component props

Returns

FormField<P, V>

Hierarchy

• Component
• FormField

Properties

_internalState: FormFieldState

Inherited from _internalState

Component internal state

_props: P

Inherited from _props

Component props

children: Component<ComponentProps, object>[]

Inherited from children

Child components

Default: []

instanceId: string

Inherited from instanceId

Unique component instance ID

parent: Component<ComponentProps, object>

Inherited from parent

Parent component reference

Accessors

get hasErrors(): boolean

Whether the field has validation errors

get internalState(): Readonly<S>

Inherited from internalState

Gets the internal component state

get isDirty(): boolean

Whether the field has been modified

get isTouched(): boolean

Whether the field has been touched

get props(): Readonly<P>

Inherited from props

Gets the current props

get state(): ComponentState

Inherited from state

Gets the current component lifecycle state

Methods

addChild(child: Component): void

Inherited from addChild

Adds a child component

Parameters

• child (Component) — Child component to add

Returns

• void

checkRule(rule: ValidationRule, value: V): boolean

Checks a single validation rule

Parameters

• rule (ValidationRule) — Rule to check
• value (V) — Value to validate

Returns

• boolean — True if rule passes

emit<T>(type: string, data?: T): void

Inherited from emit

Emits an event

Type Parameters

• T — Event data type

Parameters

• type (string) — Event type
• data (T, optional) — Event data

Returns

• void

Example

this.emit('valueChange', { oldValue: 1, newValue: 2 })

findChildById( id: string, ): Component<ComponentProps, object> | undefined

Inherited from findChildById

Finds a child component by ID

Parameters

• id (string) — Component ID to find

Returns

• Component<ComponentProps, object> | undefined — Found component or undefined

formatValue(value: V): string

Formats the value for display

Parameters

• value (V) — Value to format

Returns

• string — Formatted string

getDefaultValue(): V

Gets the default value for this field type

Returns

• V — Default value

getInitialState(): FormFieldState

Overrides getInitialState

Gets the initial state

Returns

• FormFieldState — Initial field state

getValue(): V

Gets the current field value

Returns

• V — Current value

handleBlur(): void

Handles field blur

Returns

• void

handleChange(rawValue: unknown): void

Handles input change event

Parameters

• rawValue (unknown) — Raw input value

Returns

• void

handleFocus(): void

Handles field focus

Returns

• void

isEmpty(value: V): boolean

Checks if a value is empty

Parameters

• value (V) — Value to check

Returns

• boolean — True if empty

mount(): void

Inherited from mount

Mounts the component

Returns

• void

off(event: string, handler: ComponentEventHandler): void

Inherited from off

Removes an event listener

Parameters

• event (string) — Event type
• handler (ComponentEventHandler) — Event handler to remove

Returns

• void

on< T, >( event: string, handler: ComponentEventHandler<T>, ): () => void

Inherited from on

Adds an event listener

Type Parameters

• T — Event data type

Parameters

• event (string) — Event type
• handler (ComponentEventHandler<T>) — Event handler

Returns

• () => void — Function to remove the listener

Example

const off = button.on('click', (event) => {
  console.log('Button clicked!', event.data)
})

// Later: remove listener
off()

onBeforeMount(): void

Inherited from onBeforeMount

Called before component mounts

Returns

• void

onBeforeUnmount(): void

Inherited from onBeforeUnmount

Called before component unmounts

Returns

• void

onBeforeUpdate( _prevProps: ComponentProps, _nextProps: ComponentProps, ): void

Inherited from onBeforeUpdate

Called before component updates

Parameters

• _prevProps (ComponentProps)
• _nextProps (ComponentProps)

Returns

• void

onError(_error: Error): void

Inherited from onError

Called when an error occurs in the component

Parameters

• _error (Error)

Returns

• void

onMounted(): void

Inherited from onMounted

Called after component mounts

Returns

• void

onStateChange( _prevState: FormFieldState, _newState: FormFieldState, ): void

Inherited from onStateChange

Called when internal state changes

Parameters

• _prevState (FormFieldState)
• _newState (FormFieldState)

Returns

• void

onUnmounted(): void

Inherited from onUnmounted

Called after component unmounts

Returns

• void

onUpdated(_prevProps: ComponentProps): void

Inherited from onUpdated

Called after component updates

Parameters

• _prevProps (ComponentProps)

Returns

• void

parseValue(rawValue: unknown): V

Parses raw input value to the field's value type

Parameters

• rawValue (unknown) — Raw input value

Returns

• V — Parsed value

removeChild(child: Component): boolean

Inherited from removeChild

Removes a child component

Parameters

• child (Component) — Child component to remove

Returns

• boolean — True if child was removed

render(): unknown

Inherited from render

Renders the component

Returns

• unknown — Rendered output

reset(): void

Resets the field to its default state

Returns

• void

setProps(nextProps: Partial<P>): void

Inherited from setProps

Updates component props

Parameters

• nextProps (Partial<P>) — New props

Returns

• void

setState(updates: Partial<S>): void

Inherited from setState

Updates the internal state

Parameters

• updates (Partial<S>) — Partial state updates

Returns

• void

Example

this.setState({ count: this.internalState.count + 1 })

setValue(value: V, options: { validate?: boolean }): void

Sets the field value

Parameters

• value (V) — New value
• options ({ validate?: boolean }, default: "{}") — Set options

Properties

• validate (boolean, optional)

Returns

• void

unmount(): void

Inherited from unmount

Unmounts the component

Returns

• void

update(): void

Inherited from update

Updates the component

Returns

• void

validate(): ValidationResult

Validates the current field value

Returns

• ValidationResult — Validation result

Example

const result = field.validate()
if (!result.valid) {
  console.log('Errors:', result.errors)
}