Web Component: j-ListForm


  • Info
  • HTML
  • JS
  • CSS
  • Meta

j-ListForm

Configuration:

  • autofocus {String/Boolean} focuses the first input element, string means a custom selector (default: false)
  • empty {String} empty list text (default: ---)
  • default {Boolean} performs DEFAULT() method for the form scope (default: true)
  • required {Boolean} controll will be "required" (default: false)
  • enter {Boolean} allows to use enter as submit (default: false)
  • disabled {Boolean} disables the control (default: false)
  • formclass {String} a custom class for form container
  • itemclass {String} a custom class for item container
  • create {String} a link to a function function(callback(DEFAULT_ITEM_OBJECT))
  • submit {String} a link to a function function(form_data, callback(NEW_DATA))
  • update {String} a link to a function function(form_data, callback(NEW_DATA))
  • remove {String} a link to a function function(remove_item, callback(really_remove?))
  • selector {String} a jQuery selector for custom template (outside of the component). Works like custom template in data-binding
  • footertop {Boolean} moves the footer on the top of the component (default: false)
  • NEW move {String} a link to a function function(items)

The component needs to have defined 3 templates wrapped in <script type="text/html">:

  • 1 first - with a Tangular template for rendering of item
  • 2 second - a form with components (the form will be wrapped in isolated scope)
  • 3 footer - a footer with button for create item

Good to know:

The component watches a click event on all buttons with name attribute:

  • name="submit" performs submit/save of data to the model
  • name="update" performs submit/save of data to the model
  • name="remove" removes the current item from the model
  • name="cancel" cancels editing
  • name="create" creates an empty form
  • form contains ui-listform-new class when creating a new item

Listing buttons:

  • NEW: name="remove" removes item
  • NEW: name="up" moves item to up
  • NEW: name="down" moves item to down

Author