Select Field
Stores a String
or Number
in the model.
Displayed as a select field in the Admin UI.
Does not allow for multiple items to be selected. If you want to provide multiple values, you can use TextArray
or NumberArray
, although neither will have the same constrained input. You can limit the options using a pre-save hook.
{ type: Types.Select, options: 'first, second, third' }
Note: Similar to
Enum
in other Frameworks.
Methods
format
Returns the label
property of the selected option, or ""
.
updateItem
The value null
will always remove the value from the item. An empty string will remove the value from the item, unless there is an option with the value of ""
.
validateInput
Ensures the value, if provided, is a valid option. If numeric
, strings are coerced to number values first.
Allows null
and ""
to clear the field value.
validateRequiredInput
Ensures a value has been provided. Empty strings are never valid, even if specified in the options
array.
Options
number
Boolean
when true
, causes the value of the field to be stored as a Number
instead of a String
{ type: Types.Select, numeric: true, options: [{ value: 1, label: 'One' }, { value: 2, label: 'Two' }] }
emptyOption
Boolean
when undefined || true
, includes a blank value as the first option in the <select>
field.
{ type: Types.Select, required: true, options: 'first, second', emptyOption: false }
options
String
or Array
the options for the select field.
Option values can be provided as a comma-delimited list String
of values, in which the string is split into an Array
.
For an Array of options, each option should be either:
-
String
representing thevalue
of the option; thelabel
is automatically generated -
Object
withvalue
andlabel
String
properties
You can mix String
and Object
items in the options Array
:
{ type: Types.Select, options: ['first', 'second', { value: 'third', label: 'The third one' }] }
Object
options can have additional properties which are accessible when the current options data, or fields options are retrieved.
{ type: Types.Select, options: [
{ value: 'first', label: 'The first option', custom: 'value' },
{ value: 'second', label: 'Second' }
]}
Properties
ops
Array
the field options array
values
Array
all option.value
properties
labels
Object
all option.label
properties, keyed by option.value
map
Object
map of options, keyed by option.value
Schema
The value of the current option will be stored at {path}
. In addition, these virtuals are provided:
pathLabel
String
- the label of the currently selected option
pathData
Object
- the currently selected option, including any custom properties
pathOptions
Array
- the field options array
pathOptionsMap
Object
- map of options, keyed by option.value
Underscore methods
pluck(property, default)
returns property value of the currently selected option, or default. Useful in conjunction with custom properties for options.
MyList.add({ state: { type: Types.Select, options: 'draft, published, archived', default: 'draft' });
MyList.fields.state.values == 'draft,published,archived';
MyList.fields.state.labels == { draft: 'Draft', published: 'Published', archived: 'Archived' };
MyList.fields.state.ops == [
{ value: 'draft', label: 'Draft' },
{ value: 'published', label: 'Published' },
{ value: 'archived', label: 'Archived' }
];
MyList.fields.state.map == {
draft: { value: 'draft', label: 'Draft' },
published: { value: 'published', label: 'Published' },
archived: { value: 'archived', label: 'Archived' }
};
var item = new MyList.model();
item.state == 'draft';
item.stateLabel == 'Draft';
item.stateData == { value: 'draft', label: 'Draft' };
item.stateOptions == MyList.fields.state.ops;
item.stateOptionsMap == MyList.fields.state.map;