Aurelia-validation@0.14.0未在UI上显示错误消息

Question

我已将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（'用户名'）。 。 .on（this）; this.validationcontroller.validate（）。catch（（）=> {}）;

Answer 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的代码保存在整个应用程序可以访问的位置中，因为您需要将其导入所有需要验证的视图模型。

Answer 2

我也有同样的问题，他们改变了传达验证信息的方式。

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

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

。

可以在此处找到更多详细信息。