aurelia-validationを注入できません

Question

バリデーションが注入されたクラスをロードしようとすると、次のエラーが発生します。

キー/値はnullでも、未定義でもありません。 DIに存在しないものを注入/登録しようとしていますか？

私はJSPMを使用して検証をインストールし、私はアウレリア検証用のJavaScriptがロードされているクロムdevのツールを使って検証している（/jspm_packages/npm/ aurelia-validation@0.8.1/XXX.js - いくつかのjsがありますChromeに読み込まれたフォルダ内のファイル）。 @injectと 'constructor'から 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); 

---

希望します。

EDIT：これは変更されました。明らかに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によれば、検証コードが変更されています。

は私が...インポートあなたは（それが注入されていない）バリデータを作成する方法だけでなく、変更されたことを

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

} 

注意をjspm install aurelia-validatejsを呼び出した後、これに私のコードを変更することになりました。