无法注入 aurelia-validation

Question

尝试加载已注入验证的类时出现以下错误。

键/值不能为空或未定义。你是否试图 注入/注册 DI 不存在的东西？

我使用 jspm 安装了验证，并且我使用 Chrome 开发工具验证了用于 aurelia-validation 的 javascript 已加载（/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

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

}

请注意，导入以及您创建验证器的方式已更改（未注入）。

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

如果链接失效，这是来自博客的代码的 sn-p：

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');
      }
    }
  }
}

希望这会有所帮助！