无法注入 aurelia 验证

Question

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

key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?

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

这是代码...

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 explains how it all works now. If you used validatejs you will also have to update your ValidationRenderer. This gist shows the updated version of the renderer in use: https://gist.run/?id=1d612b3ae341c7e9c12113e1771988e7

如果 link 死了，下面是来自博客的代码片段：

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 验证

Unable to inject aurelia-validation

dependency-injection

aurelia