如何呈现由EmberValidations验证的属性的有效状态

Question

我得到了这样的验证：

import Ember from 'ember';
import EmberValidations from 'ember-validations';


export default Ember.Controller.extend(EmberValidations, {
  validations: {
    age: {
      presence: {message: 'Enter your age'}
    }
  },
  isAgeValid: function () {
    //some chek
  }.property('age'),

  canValidateAge: function () {
    //some check to determine if to render icons
  }.property('age')
    }

在我的模板中：

  {{input id="age" placeholder="Age" value=age  class="form-control input-md"}}
                <span class="help-block">help</span>
              {{#if canValidateAge}}
                  <span class="{{if isAgeValid 'glyphicon-ok' 'glyphicon-remove'}} form-control-feedback glyphicon"></span>
                  <span class="field-error text-danger help-block">{{errors.age.[0]}}</span>
              {{/if}}

在调试器中，我当然有一个名为validations的属性，但我不知道如何使用它。还有一种方法可以避免像is AgeValid和canValidateAge这样的方法(如果处于“原始”状态，则不会显示图标)。

鲍尔：

  "devDependencies": {
    "broccoli-asset-rev": "^2.0.2",
    "broccoli-merge-trees": "^0.2.1",
    "broccoli-static-compiler": "^0.2.1",
    "ember-cli": "0.2.5",
    "ember-cli-app-version": "0.3.3",
    "ember-cli-babel": "^5.0.0",
    "ember-cli-content-security-policy": "0.4.0",
    "ember-cli-dependency-checker": "^1.0.0",
    "ember-cli-htmlbars": "0.7.6",
    "ember-cli-ic-ajax": "0.1.1",
    "ember-cli-inject-live-reload": "^1.3.0",
    "ember-cli-less": "^1.3.3",
    "ember-cli-qunit": "0.3.13",
    "ember-cli-uglify": "^1.0.1",
    "ember-data": "1.0.0-beta.17",
    "ember-disable-proxy-controllers": "^0.7.0",
    "ember-export-application-global": "^1.0.2",
    "ember-validations": "^2.0.0-alpha.3"
  }

Answer 1

您可以观察errors属性。

isAgeValid: Em.computed.gt('errors.age.length', 0)

如果您想只在触摸输入字段之后才显示验证，我还建议您在这篇博客文章中只在focusOut：http://www.teamrarebit.com/blog/2015/02/14/ember-inline-validation-errors之后显示错误

更新：

The missing part，作者@SuperUberDuper：

extend(EmberValidations.Mixin)