jbescoyez / ember-light-form

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:

• field.value: the value of the field attribute (here author)
• field.controlId: the id of the control (match the label for attribute)
• field.errors: the errors of the field attribute
• field.update: the action that updates of the field attribute (here author)