Bootstrap 3 and Ember Data With Server Side Validations

Here are the steps currently required to get ember-easyForm working with Bootstrap 3 and Ember-Data (with server side validations). In this application I've used Ember-CLI with a Rails backend and the ActiveModelAdapter, so your situation might be different.

Step 1 - The Initializers

I'm not sure if the pattern is the same for other build systems, but Ember-CLI has an initializers directory where I've added some "modifications" (aka hacks) to ember easyForm.

// app/initializers/easy-form.js
export default {
  name: 'easyForm',
  initialize: function() {

    Ember.EasyForm.Input.reopen({
      errorsChanged: function() {
        this.set('hasFocusedOut', true);
        this.showValidationError();
      },
      classNameBindings: ['wrapperConfig.inputClass', 'wrapperErrorClass'],
      didInsertElement: function() {
        this.addObserver('context.errors.' + this.property + '.@each', this, 'errorsChanged');
      }
    });

    Ember.EasyForm.Error.reopen({
      errorText: function() {
        if(this.get('errors.length') > 0 && this.get('parentView.wrapperErrorClass')) {
          return this.get('errors.firstObject');
        }
        return '';
      }.property('errors.firstObject').cacheable(),
      updateParentView: function() {
        var parentView = this.get('parentView');
        if(this.get('errors.length') > 0) {
          parentView.set('wrapperErrorClass', 'has-error');
        }else{
          parentView.set('wrapperErrorClass', false);
        }
      }.observes('errors.firstObject')
    });

    Ember.EasyForm.Submit.reopen({
      disabled: function() {
        return this.get('formForModel.disableSubmit');
      }.property('formForModel.disableSubmit')
    });

    //-- Bootstrap 3 Class Names --------------------------------------------
    //-- https://github.com/dockyard/ember-easyForm/issues/47
    Ember.TextSupport.reopen({
      classNames: ['form-control']
    });

    Ember.EasyForm.Config.registerWrapper('default', {
      inputTemplate: 'form-fields/input',

      labelClass: 'control-label',
      inputClass: 'form-group',
      buttonClass: 'btn btn-primary',
      fieldErrorClass: 'has-error',
      errorClass: 'help-block'
    });

  }
};

Step 2 - The Template

In the initializer, you'll notice that we are pointing to a custom template for the input class. This template will allow us to use less verbose markup while maintaining the conventions expected by bootstrap.

// app/templates/form-fields/input.hbs
{{label-field propertyBinding="view.property" textBinding="view.label"}}
<div>
  {{partial "easyForm/inputControls"}}
  {{error-field propertyBinding="view.property"}}
</div>

Step 3 - Your Template

Because we've altered the default form wrapper, we should be able to write standard forms.

<h3>New Thing</h3>

{{#form-for model}}

  {{input title}}

  {{input shortDescription}}

  {{input longDescription}}

  {{submit}}

{{/form-for}}