Skip to content

Latest commit

 

History

History
124 lines (89 loc) · 3.09 KB

data-selector.md

File metadata and controls

124 lines (89 loc) · 3.09 KB

<- Back to Table of Contents

data-selector

This isn't really a control, but rather a utility tag for ticking the correct checkboxes or radio buttons in an options array.

All validation is fired on change.

This tag is meant for use with objects or object arrays. For flat data structures such as Strings, see the simple-data-selector.

Usage

Given the following source data:

{ 
    user: {
        //Other fields..
        gender: { id: 'male' }
    },
    genders: [
        {id: 'male', label: 'Male'}, 
        {id: 'female', label: 'Female'} 
    ]
}

You can provide radio buttons as such:

<data-selector name="gender" selected-item="{{user.gender}}">
    <template is="dom-repeat" items="[[genders]]">
        <input type="radio" name="gender" value="[[item.id]]" id="radio-[[item.id]]"> <label for$="radio-[[item.id]]">[[item.label]]</label>
    </template>
</data-selector>

To get the following result:

output

As the user interacts with the radio buttons, the user.gender field in the JSON data gets updated automatically due to the two-way binding.

You can also use a data-selector for handling a checkbox array too. Just set the multiple attribute.

{
    user: {
        requiredServices: [
            {id:'install', label: 'Installation'},
        ]
    },
    services: [
        {id:'install', label: 'Installation'},
        {id:'configure', label: 'Configuration of modem'},
        {id: 'testing', label: 'Speed test'},
        {id: 'cleanup', label: 'Loose wire removal'}
    ]
}
<data-selector name="services" multiple selected-items="{{user.requiredServices}}">
    <template is="dom-repeat" items="[[services]]">
        <p>
            <input type="checkbox" value="[[item.id]]" id="checkbox-[[item.id]]"> 
            <label for$="checkbox-[[item.id]]">[[item.label]]</label>
        </p>
    </template>
</data-selector>

Doing the above will get you this:

Output

Properties

Inherited from DataElementBehaviors.Basic:

  • error: String
  • name: String
  • valid: Boolean

Inherited from DataElementBehaviors.OptionList:

  • multiple: Boolean
  • selectedItem: Object
  • selectedItems: Array
  • required: Boolean
  • valueField: String

Methods

Inherited from DataElementBehaviors.Basic:

  • addValidator(validatorFunction, errorMessage)
  • on(eventName, handlerFunction)
  • setValidity(isValid, errorMessage)

Inherited from DataElementBehaviors.DataSelector:

  • validate()

Events

Inherited from DataElementBehaviors.Basic:

  • data-element-added
  • validation

Behaviors