无法注入aurelia-validation

Question

我在尝试加载已验证注入的类时收到以下错误。

键/值不能为空或未定义。您是否尝试 注入/注册与DI不存在的内容？

我安装使用JSPM验证和我一直在使用，对奥里利亚验证的JavaScript加载Chrome浏览器开发工具验证（/jspm_packages/npm/aurelia-validation@0.8.1/XXX.js - 有几个JS在Chrome中加载的文件夹中的文件）。从@inject和'构造函数'中删除Validation，该类加载得很好。

这里是代码...

import {Repository} from 'repository'; 
import {inject} from 'aurelia-framework'; 
import {Router} from 'aurelia-router'; 
import {Validation} from 'aurelia-validation'; 

@inject(Repository, Router, Validation) 
export class Login { 
    constructor(rep, router, validation) { 
     this.rep = rep; 
     this.router = router; 
     console.log('Login'); 

     this.login = { 
      EmailAddress: '', 
      Password: '', 
      Password2: '' 
     }; 

    } 

    createAccount() { 
     console.log('Create Account'); 
     this.router.navigateToRoute('verify'); 
    } 

} 

我在做什么错？我是JSPM，NPM，Aurelia，ES2016以及Aurelia骨架应用程序中的所有其他工具的新手，因此我不确定从哪里开始。

Answer 1

aurelia-validation插件最近被重写，验证API已经在接受的答案方面再次发生了变化。

它现在使用2个独立的库aurelia-validation和aurelia-validatejs。验证程序似乎不再存在，并已由ValidationControllers取代。

新的API说明和一些例子可以在这里找到：

http://blog.durandal.io/2016/06/14/new-validation-alpha-is-here/

....和工作要点可以在这里找到：

https://gist.run/?id=381fdb1a4b0865a4c25026187db865ce

使用可以总结为以下代码：

import {inject, NewInstance} from 'aurelia-dependency-injection'; 
import {ValidationController, validateTrigger} from 'aurelia-validation'; 
import {required, email, ValidationRules} from 'aurelia-validatejs'; 

@inject(NewInstance.of(ValidationController)) 
export class RegistrationForm { 
    firstName = ''; 
    lastName = ''; 
    email = ''; 

    constructor(controller) { 
    this.controller = controller;  
    // the default mode is validateTrigger.blur but 
    // you can change it: 
    // controller.validateTrigger = validateTrigger.manual; 
    // controller.validateTrigger = validateTrigger.change; 
    } 

    submit() { 
    let errors = this.controller.validate(); 
    // todo: call server... 
    } 

    reset() { 
    this.firstName = ''; 
    this.lastName = ''; 
    this.email = ''; 
    this.controller.reset(); 
    } 
} 


ValidationRules 
    .ensure('firstName').required() 
    .ensure('lastName').required() 
.ensure('email').required().email() 
.on(RegistrationForm); 

---

希望这有助于。

编辑：这已改变，显然validatejs是一个临时解决方案。

This article解释了它现在如何工作。如果你使用了validatejs，你还必须更新你的ValidationRenderer。此要点显示使用中的渲染器的更新版本：https://gist.run/?id=1d612b3ae341c7e9c12113e1771988e7

这是从博客未来如果链接死亡的代码片段：

import {inject, NewInstance} from 'aurelia-framework'; 
import {ValidationRules, ValidationController} from "aurelia-validation"; 

@inject(NewInstance.of(ValidationController)) 
export class App { 

    message = ''; 
    firstname: string = ''; 
    lastname: string = ''; 

    constructor(private controller: ValidationController) { 
    ValidationRules 
     .ensure((m: App) => m.lastname).displayName("Surname").required() 
     .ensure((m: App) => m.firstname).displayName("First name").required() 
     .on(this); 
    } 

    validateMe() { 
    this.controller 
     .validate() 
     .then(v => { 
     if (v.length === 0) 
      this.message = "All is good!"; 
     else 
      this.message = "You have errors!"; 
     }) 
    } 
} 

...和新的验证渲染器：

import { 
    ValidationRenderer, 
    RenderInstruction, 
    ValidationError 
} from 'aurelia-validation'; 

export class BootstrapFormRenderer { 
    render(instruction) { 
    for (let { error, elements } of instruction.unrender) { 
     for (let element of elements) { 
     this.remove(element, error); 
     } 
    } 

    for (let { error, elements } of instruction.render) { 
     for (let element of elements) { 
     this.add(element, error); 
     } 
    } 
    } 

    add(element, error) { 
    const formGroup = element.closest('.form-group'); 
    if (!formGroup) { 
     return; 
    } 

    // add the has-error class to the enclosing form-group div 
    formGroup.classList.add('has-error'); 

    // add help-block 
    const message = document.createElement('span'); 
    message.className = 'help-block validation-message'; 
    message.textContent = error.message; 
    message.id = `validation-message-${error.id}`; 
    formGroup.appendChild(message); 
    } 

    remove(element, error) { 
    const formGroup = element.closest('.form-group'); 
    if (!formGroup) { 
     return; 
    } 

    // remove help-block 
    const message = formGroup.querySelector(`#validation-message-${error.id}`); 
    if (message) { 
     formGroup.removeChild(message); 

     // remove the has-error class from the enclosing form-group div 
     if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) { 
     formGroup.classList.remove('has-error'); 
     } 
    } 
    } 
} 

希望这有助于！

Answer 2

根据this blog post，验证码已更改。

我结束了通话jspm install aurelia-validatejs然后改变我的代码，这...

import {Repository} from 'repository'; 
import {inject} from 'aurelia-framework'; 
import {Router} from 'aurelia-router'; 
import {Validator} from 'aurelia-validatejs'; 

@inject(Repository, Router) 
export class Login { 
    constructor(rep, router) { 
     this.rep = rep; 
     this.router = router; 
     console.log('Login'); 

     this.login = { 
      EmailAddress: '', 
      Password: '', 
      Password2: '' 
     }; 

     this.validator = new Validator(this.login); 
     this.validator.ensure('EmailAddress') 
       .required(); 
    } 

    createAccount() { 
     console.log('Create Account'); 
     // Not sure how to actually validate yet. Before you would call 
     // this.validator.validate().then, but validate doesn't appear to 
     // return a promise anymore. Still looking into this. 
    } 

} 

注意，在导入已经改变，以及如何创建校验和（未注射）。