验证从自定义元素派生到 DynamicForm 的输入

Question

我正在尝试向在动态表单组件中生成的自定义元素添加验证以支持页面以供查看。我在 main.ts 和 DynamicForm.ts 中注入了 Aurelia-Validation 并实例化了。下面是我的代码。

自定义元素：

TS 文件

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

@customElement('custom-input')
@useView('./custominput.html')
export class CustomInput {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) fieldValue: string;
  @bindable public customClass: string;
  @bindable public placeHolder: string;
  @bindable public fieldName: string;
  @bindable public formItem: any;

}

HTML 查看：

<template>
    <input class="${customClass}" custom-class.bind="customClass" type="text" field-value.bind="fieldValue"
           value.two-way="fieldValue & validateOnChange" placeholder="${placeHolder}" place-holder.bind="placeHolder" 
           id="${fieldName}" field-name.bind="fieldName" form-item.bind="formItem" />
</template>

DynamicForm

TS 文件：

import { bindable, bindingMode, inject } from 'aurelia-framework';
import { ValidationRules, ValidationControllerFactory } from 'aurelia-validation';

@inject(ValidationControllerFactory)
export class DynamicForm {

  @bindable public formName: string;
  @bindable public formTemplate: Object;
  @bindable public callback;
  inputItem: HTMLInputElement;

  controller = null;

  constructor(ValidationControllerFactory) {
    this.controller = ValidationControllerFactory.createForCurrentScope();
  }
  public formValidator(element, field) {
      //console.log(element);
  }

  public bind() {
    if (this.formTemplate) {
      this.formTemplate[this.formName].fields.forEach((item, i) => {
        if (item.validation.isValidate === true) {
          ValidationRules.ensure(item.name)
            .displayName(item.name)
            .required()
            .on(this.formTemplate);
        }
      });
      this.controller.validate();
    }
    console.log(this.controller);
  }
}

HTML 查看：

<template>
  <require from="../../elements/custominput/custominput"></require>
  <form class="form-horizontal">
      <div form-name.bind="formName" class="form-group" repeat.for="item of formTemplate[formName].fields">
          <label for="${item.name}" class="col-sm-2 control-label">${item.label}</label>
          <div class="col-sm-10" if.bind="item.type === 'text' && item.element === 'input'">
              <custom-input router.bind="router" custom-class="${item.classes}" field-value.two-way="item.value"
                            place-holder="${item.placeHolder}" ref="inputItem" item.bind="formValidator(inputItem, item)" 
                            field-name.bind="item.name" form-item.bind="item">
              </custom-input>
          </div>
      </div>
    <div class="form-group">
      <div class="col-sm-12">
        <button type="submit" class="btn btn-default pull-right" click.delegate="callback()">Submit</button>
      </div>
    </div>
  </form>
  <ul if.bind="controller.errors.length > 0">
    <li repeat.for="error of controller.errors">${error}</li>
  </ul>
</template>

支持页面：

此页面将加载 DynamicForm

<template>
  <require from="./support.scss"></require>
  <require from="../DynamicForm/dynamicform"></require>
  <div class="panel panel-primary">
    <div class="panel-heading">${pageTitle}</div>
    <div class="panel-body">
      <dynamic-form form-template.two-way="formTemplate" form-name.two-way="formName" callback.call="processForm()"></dynamic-form>
    </div>
  </div>
</template>

当我在浏览器中查看 support 页面时，我在 UI 中没有得到验证。不确定验证是否位于嵌套 components/elements 中。视图是这样生成的 custominput element -> DynamicForm -> support page

Plunker link 了解更多信息：

非常感谢任何帮助。 :)

Answer 1

两大问题：

1。规则不应存储在字段上

规则存储在对象的原型上并与该对象的属性有关。

您正在为每个人属性定义规则，因此最终它试图验证 property.property 而不是 object.property，这并没有像您看到的那样做很多事情。

每次表单模板更改时，您也声明了规则。我基本上不会把那个逻辑放在那里；把它靠近那些物体的来源。

如果对象是在您的客户端代码中的某处声明的，请在相同的模块文件中声明规则
如果对象来自服务器，请在获取它们后立即在获取它们的同一位置声明这些对象的规则

无论如何，这些规则声明不属于更改处理程序。

2。缺少绑定

ValidationController 需要知道您要验证哪个对象或属性。它只知道以下任一情况：

您的规则是通过 controller.addObject(obj, rules).
您的规则是通过 ValidationRules.[...].on(obj) 声明的，您的 html 模板中的字段后面有 & validate。

这两种方法各有利弊，最终您应该选择阻力最小的方法。我可能会选择第二种方法，因为如果您直接在控制器上声明所有规则，事情会变得更加复杂。

验证从自定义元素派生到 DynamicForm 的输入

Validate input that derives from custom element in to DynamicForm

aurelia

1。规则不应存储在字段上

2。缺少绑定