Question

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

键/值不能为null或未定义。你想要吗？注入/注册DI不存在的东西？

我使用jspm安装了验证，并且我已经使用Chrome开发工具验证了加载aurelia验证的javascript（/jspm_packages/npm/aurelia-validation@0.8.1/XXX.js - 有几个js文件Chrome中加载的文件夹）。从Validation和'构造函数'中删除@inject，该类加载得很好。

这是代码......

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

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

}

请注意，导入已更改，以及您如何创建Validator（未注入）。

Answer 2

最近重写了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');
      }
    }
  }
}

希望这有帮助！

无法注入aurelia-validation

2 个答案: