Ember-light-form NPM

ember-light-form

This addon provides a flexible framework to manage form states and validations. It allows to use any form control component (e.g. one-way-controls, ember-power-select,...) .

Install

ember install ember-light-form

Example

{{#light-form (changeset post PostValidations) action=(action "createPost") as |f| }}
  {{!-- A basic textfield --}}
  {{f.field 'title' control=f.text}}

  {{f.field 'title'
    control=f.text
    label=(component f.label 'Title:' class='my-custom-class')
  }}

  {{!-- A basic textfield with custom label --}}
  {{f.field 'tags' label=(label 'Keywords') control=f.text}}

  {{!-- A textarea with custom attributes (here required and placeholder) --}}
  {{f.field 'content' control=(component f.textarea required=true placeholder='Your content')}}

  {{!-- A field with a custom component (here ember-power-select) --}}
  {{#f.field 'author' as |field|}}
    {{field.label 'Author:'}}

    {{#power-select options=authors selected=field.value onchange=field.update as |author|}}
      {{author.name}}
    {{/power-select}}
  {{/f.field}}

  <div class="form-actions">
    <button class="action-button action-button__main">
      {{if f.isRunning "Saving..." "Save"}}
    </button>

    {{link-to 'Cancel' 'index' class="cancel-button"}}
  </div>
{{/light-form}}

Built-in controls

Built-in controls rely on ember-one-way-controls.

The available controls are:

f.checkbox (doc)
f.color (doc)
f.date (doc)
f.datetime (doc)
f.email (doc)
f.file (doc)
f.hidden (doc)
f.input (doc)
f.month (doc)
f.number (doc)
f.password (doc)
f.radio (doc)
f.range (doc)
f.search (doc)
f.select (doc)
f.tel (doc)
f.text (doc)
f.textarea (doc)
f.time (doc)
f.url (doc)
f.week (doc)

Custom controls

You can use any plug-in control and bind them to ember-light-form fields as illustrated below:

{{#f.field 'author' as |field|}}
  {{field.label 'Author:'}}

  {{#power-select options=authors selected=field.value onchange=field.update as |author|}}
    {{author.name}}
  {{/power-select}}
{{/f.field}}

The available attributes are: