Ember-form-object NPM

Ember Form Object

Form object pattern in Ember apps (similar to ActiveModel Form Objects in Ruby on Rails)

Features

Declarative validations (depends on ember-validations under the hood)
Handles client & server side validation errors
Properties proxied to / synced from model
Virtual, async & readonly properties
Well defined form save (submit) process with appropriate hooks
Manage form "dirty", "loaded", "submitting" and "valid" state
Prevent form loss with confirmation when leaving dirty form
Add/remove properties in runtime (useful for dynamic forms)
Detect model property conflicts while form is being edited (in "dirty" state)

Disclaimer

This project is currently in alpha phase. Public API of the library is still under active development.

Installation

ember install ember-form-object

Example usage

Form object for todo model

// app/forms/todo.js

import Ember from 'ember';
import ModelFormObject from 'ember-form-object/forms/model-form';

export default ModelFormObject.extend({
  properties: {
    'title': { validate: { presence: true } },
    'completed': {},
    'assignee': {},
    'subscribers': { async: true },
    'description': { virtual: true, validate: { presence: true } },
    'people': { virtual: true, async: true }
  },

  setDescription() {
    return this.get('model.description');
  },

  syncDescription() {
    const parsedDescription = Ember.String.capitalize(this.get('description').trim());
    this.set('model.description', parsedDescription);
  },

  beforeSubmit() {
    this._super(...arguments);
  },

  afterSubmit() {
    this._super(...arguments);
    this.set('description', this.setDescription());
  }
});

Route with form route mixin (which instantiates todo form object)

import Ember from 'ember';
import FormRouteMixin from 'ember-form-object/mixins/form-route';

export default Ember.Route.extend(FormRouteMixin, {
  formName: 'todo',

  model(params) {
    return this.store.peekRecord('todo', params.id);
  },

  afterModel() {
    this._super(...arguments);
    this.set('form.people', this.store.peekAll('user'));
  },

  actions: {
    saveModelForm() {
      this.get('form').save();
      // .then() => form saved
      // .catch() => validation probably failed
    }
  }
});

Non-model form object usage (login form)

import Ember from 'ember';
import BaseForm from 'ember-form-object/forms/base-form';

export default BaseForm.extend({
  properties: {
    'email': {
      value: '',
      validate: { presence: true }
    },
    'password': {
      value: '',
      validate: { presence: true }
    },
    'rememberMe': {
      value: false
    }
  },

  submit() {
    const credentials = this.getProperties('email', 'password');
    // This is mocked, you should actually login here :)
    return new Ember.RSVP.Promise((resolve) => setTimeout(() => resolve(credentials), 1000));
  }
});