Constructor
new DynamicList(valueopt, choicesopt, optionsopt)
Instantiate a dynamic list widget.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
value | string | | <optional> | null | The initial input value(s). |
choices | Object.<string, *> | <optional> | Object containing the selectable choices of the widget. The object keys serve as values for the different choices while the values are used as choice labels. If omitted, no default choices are presented to the user, instead a plain text input field is rendered allowing the user to add arbitrary values to the dynamic list. | |
options | LuCI. | <optional> | Object describing the widget specific options to initialize the dynamic list. |
Extends
Methods
addChoices(values, labels)
Add new suggested choices to the dynamic list.
This function adds further choices to an existing dynamic list, ignoring choice values which are already present.
| Name | Type | Description |
|---|---|---|
values | Array.<string> | The choice values to add to the dynamic lists suggestion dropdown. |
labels | Object.<string, *> | The choice label values to use when adding suggested choices. If no label is found for a particular choice value, the value itself is used as label text. Choice labels may be any valid value accepted by |
clearChoices()
Remove all existing choices from the dynamic list.
This function removes all preexisting suggested choices from the widget.
getValidationError() → {string}
Returns the current validation error
- Inherited From
The validation error at this time
- Type:
- string
getValue() → {string|Array.<string>|null}
Read the current value of the input widget.
- Overrides
The current value of the input element. For simple inputs like text fields or selects, the return value type will be a - possibly empty - string. Complex widgets such as DynamicList instances may result in an array of strings or null for unset values.
- Type:
- string |
Array.<string> | null
isChanged() → {boolean}
Check whether the input value was altered by the user.
- Inherited From
Returns true if the input value has been altered by the user or false if it is unchanged. Note that if the user modifies the initial value and changes it back to the original state, it is still reported as changed.
- Type:
- boolean
isValid() → {boolean}
Check whether the current input value is valid.
- Inherited From
Returns true if the current input value is valid or false if it does not meet the validation constraints.
- Type:
- boolean
registerEvents(targetNode, synevent, events)
Dispatch a custom (synthetic) event in response to received events.
Sets up event handlers on the given target DOM node for the given event names that dispatch a custom event of the given type to the widget root DOM node.
The primary purpose of this function is to set up a series of custom uniform standard events such as widget-update, validation-success, validation-failure etc. which are triggered by various different widget specific native DOM events.
| Name | Type | Description |
|---|---|---|
targetNode | Node | Specifies the DOM node on which the native event listeners should be registered. |
synevent | string | The name of the custom event to dispatch to the widget root DOM node. |
events | Array.<string> | The native DOM events for which event handlers should be registered. |
- Inherited From
render() → {Node}
Render the widget, set up event listeners and return resulting markup.
- Overrides
Returns a DOM Node or DocumentFragment containing the rendered widget markup.
- Type:
- Node
setChangeEvents(targetNode, …events)
Set up listeners for native DOM events that may change the widget value.
Sets up event handlers on the given target DOM node for the given event names which may cause the input value to change completely, such as change events in a select menu. In contrast to update events, such change events will not trigger input value validation but they may cause field dependencies to get re-evaluated and will mark the input widget as dirty.
| Name | Type | Attributes | Description |
|---|---|---|---|
targetNode | Node | Specifies the DOM node on which the event listeners should be registered. | |
events | string | <repeatable> | The DOM events for which event handlers should be registered. |
- Inherited From
setPlaceholder(value)
Set the current placeholder value of the input widget.
| Name | Type | Description |
|---|---|---|
value | string | | The placeholder to set for the input element. Only applicable to text inputs, not to radio buttons, selects or similar. |
- Inherited From
setUpdateEvents(targetNode, …events)
Set up listeners for native DOM events that may update the widget value.
Sets up event handlers on the given target DOM node for the given event names which may cause the input value to update, such as keyup or onclick events. In contrast to change events, such update events will trigger input value validation.
| Name | Type | Attributes | Description |
|---|---|---|---|
targetNode | Node | Specifies the DOM node on which the event listeners should be registered. | |
events | string | <repeatable> | The DOM events for which event handlers should be registered. |
- Inherited From
setValue(value)
Set the current value of the input widget.
| Name | Type | Description |
|---|---|---|
value | string | | The value to set the input element to. For simple inputs like text fields or selects, the value should be a - possibly empty - string. Complex widgets such as |
- Overrides
triggerValidation() → {boolean}
Force validation of the current input value.
Usually input validation is automatically triggered by various DOM events bound to the input widget. In some cases it is required though to manually trigger validation runs, e.g. when programmatically altering values.
- Inherited From
- Type:
- boolean
Type Definitions
InitOptions
In case choices are passed to the dynamic list constructor, the widget supports the same properties as Dropdown.InitOptions but enforces specific values for some dropdown properties.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
multiple | boolean | <optional> | false | Since dynamic lists never allow selecting multiple choices when adding another list item, this property is forcibly set to |
optional | boolean | <optional> | true | Since dynamic lists use an embedded dropdown to present a list of predefined choice values, the dropdown must be made optional to allow it to remain unselected. |