为输入验证创建一个ember组件

时间:2015-05-16 23:36:07

标签: javascript validation ember.js

我在Ember应用程序中有一个表单,在添加服务器端验证反馈后开始变得有点难看,我尝试使用This link作为基础将其转换为组件

我当前的输入框如下所示:

<div class="form-group">
  <label class="group-label">Message:</label>
  {{textarea value=model.message classNames="group-control" placeholder="Message"}}
</div>
<div {{bind-attr class=":form-group model.errors.message:has-error"}}>
  <label class="group-label">Message:</label>
  {{input value=model.message classNames="group-control" placeholder="Message"}}
</div>
{{#if model.errors.message}}
  <div class="group-errors">
    {{#each error in model.errors.message}}
      <div class="error">
        {{error.message}}
      </div>
    {{/each}}
  </div>
{{/if}}

我想将其转换为组件,这就是我目前所拥有的:

form-input.hbs

<div {{bind-attr class=":form-group hasError:has-error"}}>
  <label class="group-label" {{bind-attr for=label}}>{{label}}</label>
  {{yield}}
</div>
{{#if errors.length}}
  <p>Errors</p>
  <span class="help-block">
    {{errors}}
  </span>
{{/if}}

form-input_component.coffee

App.FormInputComponent = Ember.Component.extend
  label: Em.computed 'for', ->
    @get('for').underscore().replace(/_/g, " ").capitalize()

  hasError: (->
    @get('object.errors')?.has @get('for')
  ).property 'object.errors.[]'

  errors: (->
    return Ember.A() unless @get('object.errors')
    @get('object.errors').errorsFor(@get('for')).mapBy('message').join(', ')
  ).property 'object.errors.[]'

这会正确显示输入字段但不会显示错误,我遗漏了一些内容,但我不确定它是什么。

0 个答案:

没有答案