在模型

Question

这与this类似，但我们希望在模型级别定义验证逻辑，但以下内容未显示验证消息。

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

请注意，在user.html中使用了validate =“model.firstName”，这使得验证工作正常，这意味着当用户输入有效时，我看到'has-success'类被添加到form-group div中，但是当它无效输入时，它不显示消息。 但是，如果我在user-model.js之外取出验证逻辑并将其放在user.js中，如下所示，它可以正常工作。

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

我们正在尝试在用户模型本身中定义验证逻辑，以便当我们需要在其他UI中使用它时，我们有集中的位置来验证它而不是复制和放大。将逻辑粘贴到处。我可能做错了什么，但如果有人知道如何做到这一点，那么任何帮助都会受到赞赏！

Answer 1

来自aurelia-validation文档，

  

当您的视图模型变得更复杂或者您开始​​使用绑定时   转换器，用于设置验证规则的绑定路径   可能与您在视图中使用的绑定路径不同，所以   您需要为验证自定义属性提供一些额外的线索   哪些元素应与哪些验证规则匹配。   考虑这个更复杂的例子......

基本上，验证规则是针对firstName中的UserModel属性创建的，但输入元素的绑定具有不同的绑定路径：value.bind="userModel.firstName"。因此，您需要在输入元素上添加validate="firstName"属性，以帮助 aurelia-validation 知道哪个HTML元素与验证消息匹配。

以下是如何做到的（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>