FormField

Defined in: field.ts:16, field.ts:263

Form field that tracks input state and validation errors

Key features:

• Tracks touch state
• Handles intermediate (partial) input states
• Manages error reporting
• Supports auto-finalization of intermediate values

Types

ChangeType

ChangeType = "final" | "intermediate"

Defined in: field.ts:277

The type of change that has occurred in the field.

• "final" - The input is complete and no further update is necessary to make it valid.
• "intermediate" - The input is incomplete and does not yet conform to the expected format.

---

Name

Name<T> = FormField.NameStrict<T> | FormField.NameAugmented<T>

Defined in: field.ts:269

Field name

---

NameAugmented

NameAugmented<T> = `${FormField.NameStrict<T>}:${string}`

Defined in: field.ts:267

Augmented field name with an arbitrary suffix

---

NameStrict

NameStrict<T> = keyof T & string

Defined in: field.ts:265

Strict field name

Members

fieldName

readonly fieldName: string

Defined in: field.ts:26

---

id

readonly id: string

Defined in: field.ts:25

Identity of the field instance

Remarks

Unique per instance and fixed for its lifetime, but not reproducible: a server render and the client render that hydrates it produce different values. For an id that reaches the DOM, use stableId instead.

---

validator

readonly validator: Validator<any>

Defined in: field.ts:27

---

errors

Get Signature

get errors(): ReadonlySet<string>

Defined in: field.ts:126

Error messages for the field

Regardless of isErrorReported, this value is always up-to-date.

Returns

ReadonlySet<string>

@computed

---

hasErrors

Get Signature

get hasErrors(): boolean

Defined in: field.ts:136

Whether the field has errors

Regardless of isErrorReported, this value is always up-to-date.

Returns

boolean

@computed

---

isChanged

Get Signature

get isChanged(): boolean

Defined in: field.ts:96

Whether the field value is changed

Returns

boolean

---

isErrorReported

Get Signature

get isErrorReported(): boolean | undefined

Defined in: field.ts:115

Whether the error states has been reported.

Check this value to determine if errors should be displayed to the user.

Remarks

• Error reporting is delayed until validation is complete.
• It can be used directly with the aria-invalid attribute.

Returns

boolean | undefined

• undefined - Validity is undetermined (not yet reported)
• false - Field is valid
• true - Field is invalid

@computed

---

isIntermediate

Get Signature

get isIntermediate(): boolean

Defined in: field.ts:89

Whether the field value is intermediate (partial input)

Example

- Typing "user@" in an email field
- Typing a partial date "2024-"

Remarks

Intermediate values are automatically finalized after a delay

Returns

boolean

---

isTouched

Get Signature

get isTouched(): boolean

Defined in: field.ts:75

Whether the field is touched.

A field becomes touched when the user interacts with it.

Returns

boolean

---

stableId

Get Signature

get stableId(): string

Defined in: field.ts:64

Id for associating a label with the field's form control

Remarks

• Once the form's Form.stableId is assigned an id of its own, that id and fieldName, joined by :
• Until then, the field's own id: unique on the page, but different between a server render and the client render that hydrates it
• Use this, not id, for anything that reaches the DOM

See

Form.stableId

Returns

string

---

finalizeChangeIfNeeded()

finalizeChangeIfNeeded(): void

Defined in: field.ts:207

@action

Finalize the intermediate change if needed (usually triggered by onBlur)

Returns

void

---

markAsChanged()

markAsChanged(type?): void

Defined in: field.ts:179

@action

Mark the field as changed

It's usually triggered by onChange.

Parameters

type?

FormField.ChangeType = "final"

Default to "final"

Returns

void

Remarks

• "final" immediately reports errors
• "intermediate" schedules auto-finalization after delay

---

markAsTouched()

markAsTouched(): void

Defined in: field.ts:163

@action

Mark the field as touched

It's usually triggered by onFocus.

Returns

void

---

reportError()

reportError(): void

Defined in: field.ts:201

@action

Report the errors of the field.

It will wait until the validation is up-to-date before reporting the errors.

Returns

void

---

reset()

reset(): void

Defined in: field.ts:150

@action

Reset the field state

Returns

void

Remarks

• Clears touched state
• Clears change state
• Clears error reporting
• Cancels any pending auto-finalization