Ember-uni-form NPM

Ember-uni-form

The Ember Uni-Form addon makes it easy to wire up complex, validated forms.

Uni-Form

minimizes boilerplate with sensible defaults
provides a conventional structure for your form code
supports validation of nested models within the payload

Usage

{{#uni-form action=(action 'mySubmit') form=myForm }}
  {{ uni-form-input payloadKey='emailAddress' type='email' }}
  {{ uni-form-input payloadKey='password' type='password' }}
  {{#if myForm.submitFailed }} {{ uni-form-messages }} {{/if}}
  <input type="submit" value="Save">
{{/uni-form}}

import Ember from 'ember';
export default Ember.Controller.extend({

  myForm: Ember.computed('model', function () {
    return this.store.createRecord('uni-form', { payload: this.get('model') });
  }),

  actions: {
    mySubmit: function () {
      this.get('model').save()
      .then(() => this.transitionTo('user', this.get('model')))
      .catch(() => {
        // Set a form-level error message
        this.get('myForm').addMessage({
          body: 'The internet gods are angry. Connection failed.',
          tone: 'error'
        });
        // Show uni-form-messages
        this.get('myForm').set('submitFailed', true);
      });
    }
  }
}

Find this example insufficient? It is! The real documentation is the example code in /tests/dummy/app!

How It Works

Uni-Form provides a conventional structure for your form code.

The data:

form model
field models
message objects

The views:

form component
field components

You provide:

payload model
submit action

You can directly bind a value to an input (e.g. a checkbox for a controller property), but Uni-Form really shines when you put your fields within a form and specify the payloadKey.

Uni-Form field components will take the payloadKey and parse validations and error messages on parentFormView.form.payload to give you:

field.label
field.maxlength
field.messages
field.name
field.optional
field.prompt
field.required
field.status
field.tone
field.value

Binding by payloadKey works with nested models in the payload. Check out the example in the dummy app.

A model:uni-form has a payload model, fieldsByName (a hash of field models) and messages.

A model:uni-form-field has a value alias and computed properties for message, tone, required, etc.

A message has a field, path, body, source, and tone.

// Client error for form.payload.user.emailAddress
var msg = {
  field: 'emailAddress',
  path: 'user',
  body: 'Please enter a valid email address.',
  source: 'client',
  tone: 'error',
};