Использование проверки Aurelia в модели

Question

Это похоже на this, но мы хотим определить логику проверки на уровне модели, но следующее сообщение не отображает подтверждение.

пользовательские model.js (не работает)

import {transient, inject} from 'aurelia-framework'; 
 
import {ensure} from 'aurelia-validation'; 
 

 
@transient() 
 
export class UserModel { 
 
    @ensure(function(it) { it.isNotEmpty().hasLengthBetween(3,10) }) 
 
    firstName = ""; 
 
    constructor() { 
 
    this.firstName = ""; 
 
    } 
 
}

user.js (не работает)

import {inject} from 'aurelia-framework'; 
 
import {Validation} from 'aurelia-validation'; 
 
import {UserModel} from 'models/user-model'; 
 

 
@inject(Validation, UserModel) 
 
export class User { 
 
    
 
    constructor(validation, userModel) { 
 
    this.userModel = userModel; 
 
    this.validation = validation.on(this); 
 
    } 
 
}

user.html (не работает)

<form role="form" validate.bind="validation"> 
 
    <div class="form-group"> 
 
    <label>First Name</label> 
 
    <input type="text" validate="model.firstName" value.bind="model.firstName" class="form-control" > 
 
    </div> 
 
</form>

Обратите внимание, что проверить = "model.firstName" используется в user.html, какой вид делает работу проверки, что я вижу, что класс «has-success» добавляется в div группы форм, когда пользовательский ввод действителен, но он не отображает сообщение, когда оно НЕ является допустимым вводом. Но если я выберу логику проверки за пределами user-model.js и поместил ее в user.js, как показано ниже, он работает отлично.

пользовательские model.js (рабочий)

import {transient, inject} from 'aurelia-framework'; 
 

 
@transient() 
 
export class UserModel { 
 
    constructor() { 
 
    this.firstName = ""; 
 
    } 
 
}

user.js (рабочие)

import {inject} from 'aurelia-framework'; 
 
import {Validation} from 'aurelia-validation'; 
 
import {UserModel} from 'models/user-model'; 
 

 
@inject(Validation, UserModel) 
 
export class User { 
 
    
 
    constructor(validation, userModel) { 
 
    this.model = userModel; 
 
    this.validation = validation.on(this) 
 
     .ensure('model.firstName') 
 
     .isNotEmpty() 
 
     .hasLengthBetween(3,10); 
 
    } 
 
}

user.html (рабочий)

<form role="form" validate.bind="validation"> 
 
    <div class="form-group"> 
 
    <label>First Name</label> 
 
    <input type="text" value.bind="model.firstName" class="form-control" > 
 
    </div> 
 
</form>

Мы пытаемся определить логику проверки в самой пользовательской модели, так что, когда мы должны использовать его в других UIs, мы имеем централизованное местоположение для проверки его вместо копии & всюду вставляйте логику. Возможно, что я делаю что-то неправильно, но если кто-то знает, как это сделать, любая помощь будет оценена!

Answer 1

Из документов Aurelia-проверочных

Как ваши ViewModels становятся все более сложными, или если вы начнете использовать связывание конвертеров, связывание путь, который вы использовали для настройки правил проверки может быть иной, чем связывание путь, который вы использовали в своем представлении, так что вам нужно будет предоставить атрибут validate для некоторых дополнительных ключей как , к которым должны быть сопоставлены элементы, с какими правилами проверки. Рассмотрим более сложный пример ...

В принципе, правило проверки была создана против firstName собственности в вашем UserModel, но обязательными для ввода элемента имеет другой обязательный путь: value.bind="userModel.firstName". Из-за этого вам нужно добавить атрибут validate="firstName" на входной элемент, чтобы помочь определить, какой HTML-элемент должен соответствовать сообщениям проверки. aurelia-validation.

Вот как вы можете это сделать (with Plunkr)

пользователя model.js

import {transient} from 'aurelia-framework'; 
import {ensure} from 'aurelia-validation'; 

@transient() 
export class UserModel{ 
    @ensure(function(it) { it.isNotEmpty().hasLengthBetween(3,10) }) 
    firstName = ""; 

    constructor() { 
    this.firstName = ""; 
    } 
} 

user.js

import {inject} from 'aurelia-framework'; 
import {Validation} from 'aurelia-validation'; 
import {UserModel} from 'user-model'; 

@inject(Validation, UserModel) 
export class User { 

    constructor(validation, userModel) { 
    this.userModel = userModel; 
    this.validation = validation.on(this.userModel); 
    } 

} 

user.html

<template> 
    <form role="form" validate.bind="validation"> 
    <div class="form-group"> 
     <label>First Name</label> 
     <input type="text" value.bind="userModel.firstName" validate="firstName" class="form-control"> 
    </div> 
    </form> 
</template>