[email protected] 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> 

ValidationRules .ensure（ 'ユーザー名'）必要（） .ensure（ 'パスワード'）必要（） .on（この）; this.validationController.validate（）。catch（（）=> {}）;

Answer 1

私は同じ問題を抱えていました。彼らは、レンダリングする検証情報の通信方法を変更しました。

errorオブジェクトは、resultオブジェクトになりました。したがってレンダラーでerrorをresultに置き換える必要があります。

次の違いは、今、それはまた、あなたが確認する必要があり、それに対してvalidプロパティを持つオブジェクトresult、ある、以前のバージョンでthis.controller.validate()が検証オブジェクトのarrayを返していました、検証です。

詳細はhereです。

Answer 2

チェックアウトアウレリア・検証ドキュメントページ上のブートストラップフォームレンダラは： http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/8

これは、フォーム上の各入力要素の隣にエラーを表示するための最良の方法です。

あなたはこのようにそれをインポートする必要があります：あなたはにインポートする必要がありますので、あなたは、あなたの全体のアプリがアクセスできる場所にBootstrapFormRendererのためのコードを保存したいと思う

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); 

検証が必要なすべてのビューモデル