绑定对象时 Aurelia validatejs 不起作用

Question

我在玩 aurelia-validatejs 并且能够验证页面上的简单字段。在同一页面上，我尝试初始化一个对象并将验证绑定到该对象，但它停止工作：

user_data:IUserData = {
    Login:"",
    Id         : null,
    UserProfile: {
        UserId: null
    },
    Permissions: null
};
constructor(){
    this.reporter = ValidationEngine.getValidationReporter(this.user_data);

    // if I just use this and not user_data object,
    // it works and error message is displayed in UI

    this.validator = new Validator(this.user_data)
        // when I use this.user_data (user_data object), it does validate 
        // and I can see validation result on console, but it's not shown in UI

        .ensure('Login').required().length({minimum: 3, maximum:10});
        this.observer = this.reporter.subscribe(result => {
            console.info(result);
        });
}

有人 validatejs 寻找标签，我确实有它，当我在 this 对象上初始化时它起作用了，但只要我想在 this.user_data 上验证属性，它只是不显示在 UI，但我可以在控制台上看到它。

<form action="" submit.delegate="createUser()">
    <div class="input-group ${user_data.Login | loginClass}">
        <label></label>
        <input placeholder="Login" type="text" class="form-control"
            keyup.delegate="validate()"  value.bind="user_data.Login & validate">
    </div>
</form>

这行不通，但如果我清除 user_data 就像：

    user_data:IUserData = {
        Login:"",
        Id         : null,
        UserProfile: {
            UserId: null
        },
        Permissions: null
    };
constructor(){
        this.reporter = ValidationEngine.getValidationReporter(this);

        //if I just use this and not user_data object,
        //it works and error message is displayed in UI

        this.validator = new Validator(this)
            .ensure('Login').required().length({minimum: 3, maximum:10});
        this.observer = this.reporter.subscribe(result => {
            console.info(result);
        });
}

和

<form action="" submit.delegate="createUser()">
    <div class="input-group ${user_data.Login | loginClass}">
        <label></label>
        <input placeholder="Login" type="text" class="form-control"
            keyup.delegate="validate()"  value.bind="Login & validate">
    </div>
</form>

这有效并显示在 UI 中。我在 Whosebug 上搜索了一下，得到的结果很少（我的问题很相似。如果我不在对象上使用它，我会在 UI 上收到错误消息，但是当我尝试在对象上使用它时一个对象，它在控制台上登录但不显示在 UI)

我也找到了，但没什么用。

我发现也没什么用。

我知道有很多文章可能会使这个问题被标记为重复，我问的原因是 aurelia 是一项非常新的技术，而且内容变化非常频繁。

在此先致谢！

Answer 1

你用过form-group吗？通常我们的验证问题归结为 HTML 结构不符合库。

<form action="" submit.delegate="createUser()">
    <div class="form-group ${user_data.Login | loginClass}">
        <label></label>
        <input placeholder="Login" type="text" class="form-control"
            keyup.delegate="validate()"  value.bind="Login & validate">
    </div>
</form>

Answer 2

所以我稍微研究了一下，并在 Gitter 中询问了开发人员。事实证明，这是 validatejs 插件中的一个错误。

最近进行了更改以使某些内容在所有类上可用，并且在完成该更改后，即使我们提供不同的模型，validatejs 也会在同一模型上查找 validationError Reporter。

一个小的 hacky 解决方法是

this.__validationReporter__ = ValidationEngine
    .getValidationReporter(this.user_data);

而不是：

this.reporter = ValidationEngine.getValidationReporter(this.user_data);

我已经报告了这个 issue，一旦他们想出办法就会更新。

现在我要使用

this.__validationReporter__ = ValidationEngine
    .getValidationReporter(this.user_data);

或者另一种解决方法是降级到 0。3.x 不太推荐，因为可能有一些重要的更改。

绑定对象时 Aurelia validatejs 不起作用

Aurelia validatejs not working when bind on a object

validation

aurelia