[email protected] ne pas afficher de message d'erreur sur l'interface utilisateur

Question

J'ai mis à jour le paquet de validation aurelia de 0,6 à 0,14. Auparavant, il affichera un message d'erreur sur l'étiquette la plus proche du champ de saisie. Après la mise à jour du paquet à la dernière version, aucun message d'erreur n'est affiché sur l'étiquette. ..

<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 ('userName') requise() de .ensure ('mot de passe') requise() .on (ce); this.validationController.validate(). Catch (() => {});

Answer 1

J'ai eu le même problème, ils ont changé la façon dont l'information de validation à rendre est communiquée. L'objet error de la validation est maintenant un objet result. Donc, dans votre moteur de rendu, vous devez remplacer error par result.

La différence suivante est la validation, dans la version précédente this.controller.validate() est un array des retournaient objets de validation, maintenant il est aussi un objet result, qui possède une propriété valid contre lequel vous devez vérifier.

Plus de détails peuvent être trouvés here.

Answer 2

Vérifiez le formulaire Bootstrap Renderer sur la page de documentation Aurelia-validation: http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/8

Ceci est la meilleure façon d'afficher les erreurs suivantes à chaque élément d'entrée sur votre formulaire.

Vous devez importer comme ceci:

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

Vous voulez enregistrer le code pour BootstrapFormRenderer dans un endroit que votre application peut accéder à tout, puisque vous devrez l'importer dans tous vos viewmodels qui nécessiteront une validation.