Validated Ember Input

Component Usage

{{v-input classNames="spec-fn" value=first_name name="first_name" model=model}}

V Input Component

import Ember from 'ember';

export default Ember.Component.extend({

  init: function(){
    this._super();
    this.set('errors',[]);
  },

  model:  {},
  name:   "",

  errors: [],

  updateErrors: function() {
    if (this.get('model.isValid')){
      return this.set('errors',[]);
    } else {
      var msgs = this.get('model.errors.' + this.get('name'));
      return this.set('errors', msgs);
    }
  },

  didInsertElement: function(){
    this.addObserver("model.errors." + this.get('name'), this.updateErrors);
  }
});

V Input Template

{{input type="text" name=name value=value classNames=classNames}}

{{#if errors}}
  <ul>
    {{#each error in errors}}
      <li>{{error}}</li>
    {{/each}}
  </ul>
{{/if}}