Aurelia-Validierung: Validierungsfehler werden nicht korrekt angezeigt

Question

Ich bin neu bei Aurelia. Ich möchte die Validierung an mein benutzerdefiniertes Element übergeben.

Die Validierung funktioniert, aber die Validierungsfehler werden auf dem Bildschirm nicht korrekt angezeigt.

Ich habe 2 Probleme:

• Es gibt keine Validierung ist, bevor ich das Formular
• Nach Absenden des Formulars einreichen. Ich bekomme immer noch ein Fehler bei der Überprüfung, wenn ich alles richtig zu füllen, wird der Validierungsfehler ‚ist erforderlich.‘ (Ich printscreen nahm, gibt es acht Zeichen)

welcome.html

<template> 
    <require from="./my-element"></require> 
    <my-element name.bind="myName" val.bind="validation"></my-element> 
</template> 

willkommen Js

import {Validation} from 'aurelia-validation'; 

export class Welcome { 
    myName = 'the name'; 

    static inject = [Validation] 
    constructor(validation) { 
     this.validation = validation.on(this) 
      .ensure('name') 
        .isNotEmpty() 
        .hasMinLength(3) 
        .hasMaxLength(10); 
    } 
} 

my-element.html

<template> 
    <form role="form" submit.delegate="save()" validate.bind="val"> 
     <div class="form-group"> 
      <label>name</label> 
      <input type="text" value.bind="name"><br/> 
     </div> 
     <button type="submit">Save</button> 
    </form> 
</template> 

my-element.js

import {bindable} from 'aurelia-framework'; 

export class MyElement{ 
    @bindable name; 
    @bindable val; 

    static inject = [Element]; 
    constructor(element){ 
     this.element = element; 
    } 

    save(){ 
     this.val.validate() 
       .then(() => { 
        alert('correct'); 
       }).catch(error => { 
        alert('not correct'); 
       }); 
    } 
} 

Answer 1

Caveats

Um die Validierungsmeldungen wir die Validierung in das Denken, das Element-Modell ist das Viewmodel wir die Validierung eingerichtet haben Trick haben zu bekommen. Dies sollte wahrscheinlich nicht funktionieren, und wird wahrscheinlich nicht in der Zukunft arbeiten - http://blog.durandal.io/2016/03/18/preparing-for-infrastructure-update/#validation

Zuerst in welcome.js siehe die ensure('name')-ensure('myName') ändern, dass der Name der Eigenschaft ist, die Sie validieren.

import {Validation} from 'aurelia-validation'; 

export class Welcome { 
    myName = 'the name'; 
    static inject = [Validation] 
    constructor(validation) { 
     this.validation = validation.on(this) 
      .ensure('myName') 
        .isNotEmpty() 
        .hasMinLength(3) 
        .hasMaxLength(10); 
    } 
} 

Zweitens in welcome.html gesetzt name.bind='myName'-my-name.two-way='myName' die Bindung. Dadurch wird sichergestellt, dass das Ansichtsmodell vor der Validierung mit dem aktuellen Wert aktualisiert wurde.

<template> 
    <require from="./my-element"></require> 
    <my-element my-name.two-way="myName" val.bind="validation"></my-element> 
</template> 

Drittens in my-element.js Ihre bindable von name zu myName

import {bindable} from 'aurelia-framework'; 

export class MyElement{ 
    @bindable myName; 
    @bindable val; 

    static inject = [Element]; 
    constructor(element){ 
     this.element = element; 
    } 

    save(){ 
     this.val.validate() 
       .then(() => { 
        alert('correct'); 
       }).catch(error => { 
        alert('not correct'); 
       }); 
    } 
} 

ändern Und schließlich mein-element.html entsprechend aktualisieren

<template> 
    <form role="form" submit.delegate="save()" validate.bind="val"> 
     <div class="form-group"> 
      <label>name</label> 
      <input type="text" value.bind="myName"><br/> 
     </div> 
     <button type="submit">Save</button> 
    </form> 
</template>