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

Question

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

自定义元素：

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中得到验证。不确定验证是否位于嵌套组件/元素中。视图的生成方式类似于custominput element -> DynamicForm -> support page。

柱塞链接以获得更多信息：

任何帮助都是非常感谢的。:)

Answer 1

两个主要问题：

1.规则不应存储在字段中

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

您正在为每个单独的属性定义规则，因此最终它将尝试验证property.property而不是object.property，这并不像您看到的那样多。

每次表单模板更改时，您都要声明规则。我基本上不会把这个逻辑放在那里，把它放在离这些对象更近的地方。

• 如果对象是在客户端代码中的某个地方声明的，请在相同的模块文件中声明规则。
• 如果对象来自服务器，则在抓取对象的同一地点声明这些对象的规则。

无论哪种方式，这些规则声明都不属于更改处理程序。

2.缺少绑定

ValidationController需要知道要验证的对象或属性。委员会只知道这两种情况中的任何一种：

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

这两种方法都有几个优点和缺点，最终你应该选择一个给你最少阻力的方法。我可能会选择第二种方法，因为如果直接声明控制器上的所有规则，事情就会变得更加纠结。