Interface AddressNLComponentSchema

Component shape/options for the addressNL component.

Remarks

The generated documentation might be slightly off due to rendering the type alias as an interface. Double check with the actual TS types!

interface AddressNLComponentSchema {
    clearOnHide?: boolean;
    conditional?: {
        eq?: string | number | boolean;
        show?: boolean;
        when?: string;
    };
    deriveAddress: boolean;
    description?: string;
    errors?: { required?: string };
    hidden?: boolean;
    id: string;
    isSensitiveData?: boolean;
    key: string;
    label: string;
    layout: "singleColumn" | "doubleColumn";
    openForms?: {
        components?: {
            city?: {
                errors?: { pattern?: string };
                translatedErrors?: {
                    en?: { pattern?: (...) | (...) };
                    nl?: { pattern?: (...) | (...) };
                };
                validate?: { pattern?: string };
            };
            postcode?: {
                errors?: { pattern?: string };
                translatedErrors?: {
                    en?: { pattern?: (...) | (...) };
                    nl?: { pattern?: (...) | (...) };
                };
                validate?: { pattern?: string };
            };
        };
        translations?: {
            en?: { description?: string; label?: string; tooltip?: string };
            nl?: { description?: string; label?: string; tooltip?: string };
        };
    };
    registration?: { attribute: string };
    showInEmail?: boolean;
    showInPDF?: boolean;
    showInSummary?: boolean;
    tooltip?: string;
    translatedErrors?: {
        en?: { required?: string };
        nl?: { required?: string };
    };
    type: "addressNL";
    validate?: { plugins?: string[]; required?: boolean };
}

Properties

`Optional`clearOnHide

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.

`Optional`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.

Note
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.

deriveAddress

deriveAddress: boolean

Whether the city and streetName fields should be shown and auto-filled through the backend based on postcode and houseNumber.

`Optional`description

description?: string

Additional information for the form field, displayed unconditionally.

`Optional` `Readonly`errors

errors?: { required?: string }

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

`Optional`hidden

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

id: string

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

Deprecated

The new renderer does not need this.

`Optional`isSensitiveData

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

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.

Example

'myField'

Example

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

label

label: string

The form field label text.

layout

layout: "singleColumn" | "doubleColumn"

Which layout variant to render in the frontend, presentational only.

`Optional`openForms

openForms?: {
    components?: {
        city?: {
            errors?: { pattern?: string };
            translatedErrors?: {
                en?: { pattern?: (...) | (...) };
                nl?: { pattern?: (...) | (...) };
            };
            validate?: { pattern?: string };
        };
        postcode?: {
            errors?: { pattern?: string };
            translatedErrors?: {
                en?: { pattern?: (...) | (...) };
                nl?: { pattern?: (...) | (...) };
            };
            validate?: { pattern?: string };
        };
    };
    translations?: {
        en?: { description?: string; label?: string; tooltip?: string };
        nl?: { description?: string; label?: string; tooltip?: string };
    };
}

Type declaration

Optionalcomponents?: {
    city?: {
        errors?: { pattern?: string };
        translatedErrors?: {
            en?: { pattern?: (...) | (...) };
            nl?: { pattern?: (...) | (...) };
        };
        validate?: { pattern?: string };
    };
    postcode?: {
        errors?: { pattern?: string };
        translatedErrors?: {
            en?: { pattern?: (...) | (...) };
            nl?: { pattern?: (...) | (...) };
        };
        validate?: { pattern?: string };
    };
}
Configuration options for the nested components/fields used in the addressNL component.
- Optionalcity?: {
      errors?: { pattern?: string };
      translatedErrors?: {
          en?: { pattern?: (...) | (...) };
          nl?: { pattern?: (...) | (...) };
      };
      validate?: { pattern?: string };
  }
  - Optional Readonlyerrors?: { pattern?: string }
    Resolved custom error messages, for the active locale. Set by the backend from translatedErrors - should never be written to.
  - OptionaltranslatedErrors?: { en?: { pattern?: (...) | (...) }; nl?: { pattern?: (...) | (...) } }
    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.
  - Optionalvalidate?: { pattern?: string }
    The validation configuration of the component.
    - Optionalpattern?: string
      RegExp pattern that the value of text-based fields must match.
- Optionalpostcode?: {
      errors?: { pattern?: string };
      translatedErrors?: {
          en?: { pattern?: (...) | (...) };
          nl?: { pattern?: (...) | (...) };
      };
      validate?: { pattern?: string };
  }
  - Optional Readonlyerrors?: { pattern?: string }
    Resolved custom error messages, for the active locale. Set by the backend from translatedErrors - should never be written to.
  - OptionaltranslatedErrors?: { en?: { pattern?: (...) | (...) }; nl?: { pattern?: (...) | (...) } }
    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.
  - Optionalvalidate?: { pattern?: string }
    The validation configuration of the component.
    - Optionalpattern?: string
      RegExp pattern that the value of text-based fields must match.
Optionaltranslations?: {
en?: { description?: string; label?: string; tooltip?: string };
nl?: { description?: string; label?: string; tooltip?: string };
}

`Optional`registration

registration?: { attribute: string }

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

Deprecated

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.

`Optional`showInEmail

showInEmail?: boolean

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

`Optional`showInPDF

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.

`Optional`showInSummary

showInSummary?: boolean

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

`Optional`tooltip

tooltip?: string

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

`Optional`translatedErrors

translatedErrors?: { en?: { required?: string }; nl?: { 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

type: "addressNL"

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

`Optional`validate

validate?: { plugins?: string[]; required?: boolean }

The validation configuration of the component.

Type declaration

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.

Interface AddressNLComponentSchema

Remarks

Index

Properties

Properties

OptionalclearOnHide

Optionalconditional

Type declaration

Optionaleq?: string | number | boolean

Note

Optionalshow?: boolean

Optionalwhen?: string

deriveAddress

Optionaldescription

Optional Readonlyerrors

Optionalhidden

id

Deprecated

OptionalisSensitiveData

key

Example

Example

label

layout

OptionalopenForms

Type declaration

Optionalcity?: { errors?: { pattern?: string }; translatedErrors?: { en?: { pattern?: (...) | (...) }; nl?: { pattern?: (...) | (...) }; }; validate?: { pattern?: string };}

Optional Readonlyerrors?: { pattern?: string }

OptionaltranslatedErrors?: { en?: { pattern?: (...) | (...) }; nl?: { pattern?: (...) | (...) } }

Optionalvalidate?: { pattern?: string }

Optionalpattern?: string

Optionalpostcode?: { errors?: { pattern?: string }; translatedErrors?: { en?: { pattern?: (...) | (...) }; nl?: { pattern?: (...) | (...) }; }; validate?: { pattern?: string };}

Optional Readonlyerrors?: { pattern?: string }

OptionaltranslatedErrors?: { en?: { pattern?: (...) | (...) }; nl?: { pattern?: (...) | (...) } }

Optionalvalidate?: { pattern?: string }

Optionalpattern?: string

Optionaltranslations?: { en?: { description?: string; label?: string; tooltip?: string }; nl?: { description?: string; label?: string; tooltip?: string };}

Optionalregistration

Deprecated

OptionalshowInEmail

OptionalshowInPDF

OptionalshowInSummary

Optionaltooltip

OptionaltranslatedErrors

type

Optionalvalidate

Type declaration

Optionalplugins?: string[]

Optionalrequired?: boolean

Settings

On This Page

`Optional`clearOnHide

`Optional`conditional

`Optional`eq?: string | number | boolean

`Optional`show?: boolean

`Optional`when?: string

`Optional`description

`Optional` `Readonly`errors

`Optional`hidden

`Optional`isSensitiveData

`Optional`openForms

`Optional`city?: {
errors?: { pattern?: string };
translatedErrors?: {
en?: { pattern?: (...) | (...) };
nl?: { pattern?: (...) | (...) };
};
validate?: { pattern?: string };
}

`Optional` `Readonly`errors?: { pattern?: string }

`Optional`translatedErrors?: { en?: { pattern?: (...) | (...) }; nl?: { pattern?: (...) | (...) } }

`Optional`validate?: { pattern?: string }

`Optional`pattern?: string

`Optional`postcode?: {
errors?: { pattern?: string };
translatedErrors?: {
en?: { pattern?: (...) | (...) };
nl?: { pattern?: (...) | (...) };
};
validate?: { pattern?: string };
}

`Optional` `Readonly`errors?: { pattern?: string }

`Optional`translatedErrors?: { en?: { pattern?: (...) | (...) }; nl?: { pattern?: (...) | (...) } }

`Optional`validate?: { pattern?: string }

`Optional`pattern?: string

`Optional`translations?: {
en?: { description?: string; label?: string; tooltip?: string };
nl?: { description?: string; label?: string; tooltip?: string };
}

`Optional`registration

`Optional`showInEmail

`Optional`showInPDF

`Optional`showInSummary

`Optional`tooltip

`Optional`translatedErrors

`Optional`validate

`Optional`plugins?: string[]

`Optional`required?: boolean