Ember Simple Form

form.hbs

{{#simple-form model=model action="save"}}

    {{ simple-input type="text" value="name" }}
    {{ simple-input type="email" value="email" }}
    {{ simple-input type="textarea" value="body" label="Question" }}
    {{ simple-input type="textarea" value="answer" }}

    <div class="form-group">
        {{ submit-button label="Add Question" isLoading=model.isSaving }}
        {{ link-to "Cancel" "questions" class="btn btn-link" }}
    </div>

{{/simple-form}}

questions_controller.rb

# ...
def create
    question = Question.new(question_params)

    if question.save
        render json: question, status: 201
    else
        render json: { errors: question.errors }, status: 422
    end
end
# ...

simple-form.hbs

<fieldset {{ bind-attr disabled=model.isSaving }}>
    {{ yield }}
</fieldset>

simple-form.js

import Ember from 'ember';

export default Ember.Component.extend({

    tagName: 'form',

    submit: function (e) {
        e.preventDefault();
        this.sendAction('action');
    },

    focusFirstInput: function () {
        this.$('input').eq(0).focus();
    }.on('didInsertElement')

});

simple-input.hbs

{{#if isCheckbox}}
    <label>
        {{ input type="checkbox" checked=resolveValue }}
        {{ resolveLabel }}
    </label>
{{else}}
    <label>{{ resolveLabel }}</label>

    {{#if template}}
        {{ yield }}
    {{else if isTextarea}}
        {{ textarea value=resolveValue class="form-control" }}
    {{else}}
        {{ input type=type value=resolveValue class="form-control"}}
    {{/if}}
{{/if}}

{{#if hasError}}
    <span class="{{ unbound errorClass }}">{{ errors }}</span>
{{/if}}

simple-input.js

import Ember from 'ember';
import humanize from 'dashboard/utils/humanize';

export default Ember.Component.extend({

    classNameBindings: [ 'resolveClass', 'hasError' ],

    isCheckbox: Ember.computed.equal('type', 'checkbox'),
    isTextarea: Ember.computed.equal('type', 'textarea'),

    initialize: function () {
        var key = 'parentView.model.errors.' + this.get('value');

        Ember.defineProperty(this, 'hasError', Ember.computed(key, function () {
            var errors = this.get('parentView.model.errors');
            return errors && errors.has(this.get('value'));
        }));

        Ember.defineProperty(this, 'errors', Ember.computed(key, function () {
            if (this.get('hasError')) {
                return this.get(key).map(function (error) {
                    return error.message;
                }).join(', ');
            }
        }));

        Ember.defineProperty(this, 'resolveValue', Ember.computed('parentView.model.' + this.get(key), function (getKey, value) {
            var key = 'parentView.model.' + this.get('value');

            if (arguments.length > 1) {
                this.set(key, value);
            }

            return this.get(key);
        }));
    }.on('init'),

    resolveClass: function () {
        return this.get('type') === 'checkbox' ? 'checkbox' : 'form-group';
    }.property(),

    resolveLabel: function () {
        return this.get('label') || humanize(this.get('value'));
    }.property('label', 'value'),

    errorClass: function () {
        var type = this.get('type');
        return type && type.match(/^(text|email|textarea|number|password)$/) ? 'append-error' : 'help-block';
    }.property()

});