Open Forms TS types
    Preparing search index...

    Interface DateComponentSchema

    Component shape/options for a date component.

    The smallest supported resolution is minutes - seconds are truncated to be 0 seconds.

    Note that the value/defaultValue type is just a plain string - a serialized ISO-8601 date. A Date instance could be explored in the future, but the time aspect of it will need to be discarded.

    interface DateComponentSchema {
        clearOnHide?: boolean;
        conditional?: {
            eq?: string | number | boolean;
            show?: boolean;
            when?: string;
        };
        datePicker?: DatePicker;
        defaultValue?: string
        | string[];
        description?: string;
        disabled?: boolean;
        errors?: {
            invalid_date?: string;
            invalid_datetime?: string;
            maxDate?: string;
            minDate?: string;
            required?: string;
        };
        hidden?: boolean;
        id: string;
        isSensitiveData?: boolean;
        key: string;
        label: string;
        multiple?: boolean;
        openForms?: {
            maxDate?: | NoDateConstraint
            | FixedValueDateConstraint
            | RelativeDateConstraint
            | { includeToday: null
            | boolean; mode: "past" };
            minDate?:
                | NoDateConstraint
                | FixedValueDateConstraint
                | RelativeDateConstraint
                | { includeToday: null
                | boolean; mode: "future" };
            translations?: {
                en?: { description?: string; label?: string; tooltip?: string };
                nl?: { description?: string; label?: string; tooltip?: string };
            };
            widget?: "inputGroup"
            | "datePicker";
        };
        prefill?: {
            attribute: string;
            identifierRole: "main"
            | "authorised_person";
            plugin: string;
        };
        registration?: { attribute: string };
        showInEmail?: boolean;
        showInPDF?: boolean;
        showInSummary?: boolean;
        tooltip?: string;
        translatedErrors?: {
            en?: {
                invalid_date?: string;
                invalid_datetime?: string;
                maxDate?: string;
                minDate?: string;
                required?: string;
            };
            nl?: {
                invalid_date?: string;
                invalid_datetime?: string;
                maxDate?: string;
                minDate?: string;
                required?: string;
            };
        };
        type: "date";
        validate?: {
            maxDate?: null
            | string;
            minDate?: null | string;
            plugins?: string[];
            required?: boolean;
        };
    }
    Index

    Properties

    clearOnHide? conditional? datePicker? defaultValue? description? disabled? errors? hidden? id isSensitiveData? key label multiple? openForms? prefill? registration? showInEmail? showInPDF? showInSummary? tooltip? translatedErrors? type validate?

    Properties

    clearOnHide?: boolean

    Clear the value (remove the key from the submission data) when the field is hidden. This is applied if the component itself or any parent is hidden, irrespective the mechanism that made it hidden.

    Related: hidden, conditional.

    conditional?: { eq?: string | number | boolean; show?: boolean; when?: string }

    Type declaration

    • Optionaleq?: string | number | boolean

      The value that should be checked against the reference component value.

      For array values (of the reference component), the array is checked if it contains the specified value.

      Only (a subset of) primitives are supported.

    • Optionalshow?: boolean

      Whether the field should be shown (true) or hidden (false) when the condition is met.

    • Optionalwhen?: string

      The reference component key. Its value will be retrieved and tested against eq.

    datePicker?: DatePicker
    defaultValue?: string | string[]

    The default/initial value to populate the field with if no value is set yet.

    description?: string

    Additional information for the form field, displayed unconditionally.

    disabled?: boolean

    Should be named readOnly instead - displays the field, includes the data in the submission but editing is not allowed.

    errors?: {
        invalid_date?: string;
        invalid_datetime?: string;
        maxDate?: string;
        minDate?: string;
        required?: string;
    }

    Resolved custom error messages, for the active locale. Set by the backend from translatedErrors - should never be written to.

    hidden?: boolean

    Hide or show the form field. This only controls the visibility - whether submission data is retained or not is controlled through clearOnHide.

    id: string

    Unique ID for a component in a form definition. Used to render HTML IDs.

    The new renderer does not need this.

    isSensitiveData?: boolean

    Marker for a form field that requests potentially (privacy) sensitive information.

    Pruning of submission data will clear the data of components marked as sensitive data.

    This is specific to Open Forms.

    key: string

    Unique key for the component in a larger form definition.

    The value must comply with the (\w|\w[\w.\-]*\w) regex, meaning that periods/dots are allowed unless they're start or end. The period character creates a nesting level in the submission data.

    'myField'

    'parent.child' // creates `{parent: {child: <value}}` data.
    label: string

    The form field label text.

    multiple?: boolean

    Flag that controls the multi-value mode of the field.

    If multiple values are enabled, typically an array of values will be submitted for the field instead of a single item.

    openForms?: {
        maxDate?:
            | NoDateConstraint
            | FixedValueDateConstraint
            | RelativeDateConstraint
            | { includeToday: null
            | boolean; mode: "past" };
        minDate?:
            | NoDateConstraint
            | FixedValueDateConstraint
            | RelativeDateConstraint
            | { includeToday: null
            | boolean; mode: "future" };
        translations?: {
            en?: { description?: string; label?: string; tooltip?: string };
            nl?: { description?: string; label?: string; tooltip?: string };
        };
        widget?: "inputGroup"
        | "datePicker";
    }

    Type declaration

    • OptionalmaxDate?:
          | NoDateConstraint
          | FixedValueDateConstraint
          | RelativeDateConstraint
          | { includeToday: null
          | boolean; mode: "past" }

      Options for how to derive/calculate the maximum allowed date.

    • OptionalminDate?:
          | NoDateConstraint
          | FixedValueDateConstraint
          | RelativeDateConstraint
          | { includeToday: null
          | boolean; mode: "future" }

      Options for how to derive/calculate the minimum allowed date.

    • Optionaltranslations?: {
          en?: { description?: string; label?: string; tooltip?: string };
          nl?: { description?: string; label?: string; tooltip?: string };
      }
    • Optionalwidget?: "inputGroup" | "datePicker"

      How to display the date component input field. The inputGroup provides separate input fields for day, month and year, while the datePicker provides an input field and toggle to open a date picker widget.

      The inputGroup is most convenient for "known dates" like birthdays.

    prefill?: {
        attribute: string;
        identifierRole: "main" | "authorised_person";
        plugin: string;
    }

    Configuration on how to prefill the value of the component for the (authenticated) user.

    Type declaration

    • attribute: string

      Attribute within the plugin to read to extract the prefill value. If there's no prefill, the value must be an empty string.

    • identifierRole: "main" | "authorised_person"

      In the event of a mandate, should the prefill be looked up from the beneficiary or the authorizee?

    • plugin: string

      The plugin to use for prefill. If there's no prefill, the value must be an empty string.

    Component-level prefill configuration is not flexible enough, this will be moved in the new admin UI.

    registration?: { attribute: string }

    Configuration on how to process the value of the component in the registration plugin(s).

    Component-level registration configuration does not work reliably when multiple registration plugins are enabled on the form. This will be moved in the new admin UI.

    showInEmail?: boolean

    Include the component and its value in the confirmation email data.

    showInPDF?: boolean

    Include the component and its value in the submission report PDF available for download by the end-user and often included in registration plugins.

    showInSummary?: boolean

    Include the component and its value in the submission data summary on the confirmation page or not.

    tooltip?: string

    Extra information or background for the form field. Displayed after interacting with the tooltip icon/control near the label.

    translatedErrors?: {
        en?: {
            invalid_date?: string;
            invalid_datetime?: string;
            maxDate?: string;
            minDate?: string;
            required?: string;
        };
        nl?: {
            invalid_date?: string;
            invalid_datetime?: string;
            maxDate?: string;
            minDate?: string;
            required?: string;
        };
    }

    Custom, user-supplied validation error messages for each error message type supported by the validators used in the validation configuration.

    Specified for each supported language - the backend reads this configuration and writes it to errors.

    type: "date"

    Discriminator to determine the component type. Uniquely determines the shape of the component configuration options.

    validate?: {
        maxDate?: null | string;
        minDate?: null | string;
        plugins?: string[];
        required?: boolean;
    }

    The validation configuration of the component.

    Type declaration

    • OptionalmaxDate?: null | string

      Maximum date or datetime, including the boundary. The value must be on or before this day/moment.

      Support Date instances for native types - doing the parsing once.

    • OptionalminDate?: null | string

      Minimum date or datetime, including the boundary. The value must be on or after this day/moment.

      Support Date instances for native types - doing the parsing once.

    • Optionalplugins?: string[]

      List of plugin identifiers for async backend validation. The value is considered valid as soon as one plugin considers the value valid.

      This is an Open Forms-specific feature.

    • Optionalrequired?: boolean

      Set to true to require a non-empty value to be provided for the field.

    Settings

    Member Visibility

    On This Page

    Properties