aurelia-validation: ошибки проверки неверны.

Question

Я новичок в Aurelia. Я хочу пройти проверку на свой пользовательский элемент.

Валидация действительно работает, но на экране не отображаются корректные ошибки проверки.

У меня есть 2 проблемы:

• Там нет проверки, прежде чем я отправить форму
• После отправки формы. Я получаю всегда, даже когда я заполняю все правильно, это «требуется» ошибка проверки одна ошибка проверки. (Я взял printscreen, Есть восемь символов)

welcome.html

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

Добро пожаловать .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); 
    } 
} 

мой-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> 

моего-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

Предостережения

Для получения сообщений о проверке мы должны обмануть проверку думать, модель элемента является ViewModel мы создали проверку. Это, вероятно, не должны работать, и, вероятно, не будет работать в будущем - см http://blog.durandal.io/2016/03/18/preparing-for-infrastructure-update/#validation

Первый в welcome.js изменить ensure('name') к ensure('myName'), как это имя свойства вы проверяющего.

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

Во-вторых, в welcome.html установить связывание с name.bind='myName' к my-name.two-way='myName'. Это обеспечит обновление модели представления с текущим значением до проверки.

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

В-третьих, в мои-element.js изменить Bindable от name к 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'); 
       }); 
    } 
} 

И, наконец, обновить свой-element.html соответственно

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