mobx-sentinel API doc
    Preparing search index...

    Class FormField

    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
    Index
    fieldName id validator
    errors hasErrors isChanged isErrorReported isIntermediate isTouched stableId
    finalizeChangeIfNeeded markAsChanged markAsTouched reportError reset
    fieldName: string
    id: string = ...

    Identity of the field instance

    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: Validator<any>
    • get errors(): ReadonlySet<string>

      Error messages for the field

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

      Returns ReadonlySet<string>

    • get hasErrors(): boolean

      Whether the field has errors

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

      Returns boolean

    • get isChanged(): boolean

      Whether the field value is changed

      Returns boolean

    • get isErrorReported(): boolean | undefined

      Whether the error states has been reported.

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

      Returns boolean | undefined

      • undefined - Validity is undetermined (not yet reported)
      • false - Field is valid
      • true - Field is invalid
      • Error reporting is delayed until validation is complete.
      • It can be used directly with the aria-invalid attribute.
    • get isIntermediate(): boolean

      Whether the field value is intermediate (partial input)

      Returns boolean

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

      Intermediate values are automatically finalized after a delay

    • get isTouched(): boolean

      Whether the field is touched.

      A field becomes touched when the user interacts with it.

      Returns boolean

    • get stableId(): string

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

      Returns string

      • 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

      Form.stableId

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

      Returns void

    • Mark the field as changed

      It's usually triggered by onChange.

      Parameters

      Returns void

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

    • Mark the field as touched

      It's usually triggered by onFocus.

      Returns void

    • Report the errors of the field.

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

      Returns void

    • Reset the field state

      Returns void

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

    Settings
    Member Visibility

    On This Page
    Properties
    Accessors
    Methods