valid-form component

index.hbs

<!--this is how you would use it:  -->
{{#valid-form model=model action="createModel" }}
    <div class="form-group">
        <label for="name">Name</label>
        {{valid-input-container property="name" placeholder="Name"}}
    </div>
    <div class="form-group">
        <label for="descr">Description</label>
        {{valid-input-container  property="descr" placeholder="description"}}
    </div>
    <button {{action "createModel"}} class="btn btn-primary">Add Model</button>
{{/valid-form}}

valid-form.coffee

`import Ember from 'ember'`

ValidFormComponent = Ember.Component.extend(
  tagName: "form"
  attributeBindings: ['role']
  role: 'form'
  action: 'submit'

  submit: (e)->
    if e
      e.preventDefault()
    validationPromise = @get("model").validate()
    validationPromise.then( (=>
        @get("targetObject").send(@get('action'))
      ), (=>
        console.log @get("model")
      )
    )
)

`export default ValidFormComponent`

valid-form.hbs

{{yield}}

valid-input-container.coffee

`import Ember from 'ember'`

ValidInputContainerComponent = Ember.Component.extend(
  tagName: 'div'
  classNameBindings: ['hasSuccess', 'hasWarning', 'hasError', 'hasFeedback']
  canShowErrors: false
  hasFeedback: true

  # getting the errors on the model.
  errors: (->
    @get('model.errors').get(@get("property"))
  ).property("propVal.length", 'model')

  # getting the errors on the model.
  hasError: (->
    if @get("canShowErrors") and @get('errors.length')
      @set("icon", "fa-times")
      return true
    else
      return false
  ).property('canShowErrors', "errors.length")

  hasSuccess: (->
    if @get("canShowErrors") and !@get('errors.length')
      @set("icon", "fa-check")
      return true
    else
      return false
  ).property('canShowErrors', "errors.length")

  # setting the form property
  form: (->
    parentView = @get("parentView")
    while parentView
      if parentView.get("tagName") == "form"
        return parentView
      parentView = parentView.get('parentView')
    Ember.assert(false, "cannot find form")
  ).property("parentView")

  # setting the model so we can get the errors on the property.
  model: (->
    @get("form.model")
  ).property("form", "form.model")

  # hides errors on model change
  modelChange: (->
    @set('canShowErrors', false)
  ).observes("model")

  # shows errors on un focusing from input
  focusOut: ->
    @set('canShowErrors', true)

)

`export default ValidInputContainerComponent`

valid-input-container.hbs

{{#if label}}
  <label {{bind-attr for=property}}>{{label}}</label>
  {{valid-input class="ember-text-field form-control" }}
  {{#if canShowErrors}}
    <span class="form-control-feedback">
      <i {{bind-attr class="fa fa "}} ></i>
    </span>
  {{/if}}

{{else}}
  {{valid-input class="ember-text-field form-control" }}
  {{#if canShowErrors}}
    <span class="form-control-feedback">
      <i {{bind-attr class=":fa icon"}} ></i>
    </span>
  {{/if}}
{{/if}}

{{#if canShowErrors}}
    {{#each error in errors}}
      <span class="help-block">{{error}}</span>
    {{/each}}
{{/if}}

valid-input.coffee

`import Ember from 'ember'`

ValidInputComponent = Ember.TextField.extend(
  attributeBindings: ['placeholder', 'required', 'autofocus', 'disabled', 'value']
  placeholder: Em.computed.alias('parentView.placeholder')
  required: Em.computed.alias('parentView.required')
  autofocus: Em.computed.alias('parentView.autofocus')
  disabled: Em.computed.alias('parentView.disabled')
  type: Em.computed.alias('parentView.type')
  model: Em.computed.alias('parentView.model')

  setValue: (->
    propName = @get("parentView.property").toString()
    @get('model').set(propName, @get("value") )
    @set('parentView.propVal', @get("value") )
  ).observes('value.length')

  modelChange: (->
    propName = @get("parentView.property").toString()
    if @get('model').get(propName)
      @set('value', @get('model').get(propName) )
    else
      @set('value', "" )
  ).observes("model")
  didInsertElement: ->
    propName = @get("parentView.property").toString()
    @set('value', @get('model').get(propName) )

)

`export default ValidInputComponent`