aurelia-validation@0.14.0 未在 UI 上显示错误消息答案

【问题标题】：aurelia-validation@0.14.0 not showing error message on UIaurelia-validation@0.14.0 未在 UI 上显示错误消息
【发布时间】：2017-04-12 07:25:40
【问题描述】：

我已将 aurelia-validation 包从 0.6.0 更新到 0.14.0。以前它会在最接近输入字段的标签上显示错误消息。将软件包更新到最新版本后，标签上不会显示任何错误消息。

 <form id="loginForm" class="form" role="form">
                    <div class="row">
                        <div class="form-group col-md-6">
                            <input class="form-control" value.bind="userName" type="text" id="userName" name="username" t="[placeholder]Account.UserName" />
                            <label t="Account.UserName" for="userName" class="control-label">User Name</label>

                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-6">
                            <input id="txtPassword" class="form-control" type="password" value.bind="password" name="password" t="[placeholder]Account.Password" />
                            <label for="txtPassword"  t="Account.Password" class="control-label">Password</label>
                        </div>
                    </div>                      
                    <div class="form-group">
                        <button id="btnLogin" class="btn btn-material-teal btn-toolbar" disabled.bind="validationController.errors.length"
                                 click.delegate="login()" t="Account.Login">Log in</button>

                </form>

验证规则 .ensure('userName').required() .ensure('密码').required() .on(这个); this.validationController.validate().catch(() => { });

【问题讨论】：

如果我的答案是正确答案，请继续并将其标记为已接受。谢谢！

标签： aurelia

【解决方案1】：

查看 Aurelia-Validation 文档页面上的 Bootstrap 表单渲染器： http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/8

这是在表单上每个输入元素旁边显示错误的最佳方式。

你需要像这样导入它：

import { inject } from 'aurelia-dependency-injection';
import { ValidationControllerFactory, ValidationRules } from 'aurelia-validation';
import { BootstrapFormRenderer } from '../common/bootstrap-form-renderer';

@inject(ValidationControllerFactory)
export class YourClassName {

  constructor(validationControllerFactory) {
    this.validationCtrl = validationControllerFactory.createForCurrentScope();
    this.validationCtrl.addRenderer(new BootstrapFormRenderer());
  }
}

ValidationRules
  .ensure('fieldname').required()
  .ensure('anotherfield').required.minlength(3).maxlength(20)
  .on(this);

您需要将 BootstrapFormRenderer 的代码保存在整个应用都可以访问的位置，因为您需要将其导入所有需要验证的视图模型中。

【讨论】：

【解决方案2】：

我遇到了同样的问题，他们改变了要呈现的验证信息的通信方式。

验证的error 对象现在是result 对象。因此，在您的渲染器中，您必须将 error 替换为 result。

下一个区别在于验证，在以前的版本中，this.controller.validate() 返回一个验证对象的array，现在它也是一个result 对象，具有一个您必须检查的valid 属性。

更多详情请见here。

【讨论】：