父组件的 Aurelia 防火验证

Question

我正在 aurelia 中开发自定义元素。并尝试对其进行验证。例如，假设我的应用程序组件中有一个表单，并且验证规则和 Controller 是在该组件内定义的，如下所示:

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

  constructor(validationController) {
    this.validationController = validationController;

    ValidationRules
      .ensure('password')
      .required()
      .ensure('email')
      .email()
      .on(this);
  }

  clicked() {
    this.validationController.validate().then(console.log);
  }

}

我有一个像这样的自定义元素:

element.html

<template class.bind="statusClasses" validation-errors.bind="inputErrors">
  <input id.one-time="id" value.bind="value" type.bind="type" disabled.bind="disabled"
    change.delegate="change({ value: value, $event: $event })" />
  <label for.one-time="id">${label}</label>
  <span class="help-block" repeat.for="errorInfo of inputErrors">
    ${errorInfo.error.message}
  </span>
</template>

element.js

import { bindable, bindingMode, customElement, computedFrom } from 'aurelia-framework';

import './pa-au-md-input.css';

@customElement('pa-au-md-input')
export class PaAuMdInputCustomElement {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) value;
  @bindable label;

  @bindable doValidation = true;
  @bindable showValidationErrors = true;

  @bindable disabled = false;
  @bindable type = 'text';

  @bindable change = () => { console.debug(`change event of pa-au-md-input-${this.id} is un-used.`) };

  static nextId = 0; // babel way of #1

  constructor() {
    this.initializeVariables();
  }

  initializeVariables() {
    this.autoIncrementedId = PaAuMdInputCustomElement.nextId++;
    this.id = `pa-au-md-input#${this.autoIncrementedId}`;
  }

  @computedFrom('disabled')
  get statusClasses() {
    return ''
      + (this.disabled ? 'disabled' : '')
      + (this.showValidationErrors && this.inputErrors && this.inputErrors.length ? 'has-error' : '');
  }
}

以及 app.html 中此自定义元素的用法:

<template>
  <p>
    Usage:&nbsp;<code>&lt;pa-au-md-input label="some input label title" change.call="optionalChangeHandler(value, $event)" value.bind="optionalValueBind"/&gt;</code>
  </p>
  <pa-au-md-input label="password" value.bind="password & validate" type="password">
  </pa-au-md-input>
  <p>
    Usage:&nbsp;<code>&lt;pa-au-md-input label="some input label title" change.call="optionalChangeHandler(value, $event)" value.bind="optionalValueBind"/&gt;</code>
  </p>
  <pa-au-md-input label="email" value.bind="email & validate" type="email"></pa-au-md-input>
  <input type="password" value.bind="password & validate"/>
  <button click.delegate="clicked()">validate</button>

</template>

现在，如果我在 <pa-au-md-input label="email" value.bind="email & validate" type="email"></pa-au-md-input> 中输入一些无效的电子邮件然后按验证按钮，然后它将被验证，一切都会正常。但它不检查模糊事件的验证规则。之后输入<input type="password" value.bind="password & validate"/>对模糊的验证恰到好处。那么问题是什么以及如何解决呢？

Answer 1

您需要将内部输入的模糊事件转发到自定义元素容器(传播它)

element.html

<input id.one-time="id" value.bind="value" type.bind="type" disabled.bind="disabled" blur.delegate="forwardEvent($event)" change.delegate="change({ value: value, $event: $event })" />

以及JS文件中的更改

element.js

export class PaAuMdInputCustomElement {
// omited other codes
 forwardEvent(event) {
 this.element.dispatchEvent(clone(event));
 }
}

const clone = e => new e.constructor(e.type, e);

我认为这很好用。